Вы можете использовать плагин зависимостей maven , который имеет хорошую цель dependency:get
с версии 2.1. Нет необходимости в pom, все происходит в командной строке.
Чтобы убедиться, что вы найдете цель dependency:get
, вам нужно явно указать maven для использования версии 2.1, то есть вам нужно использовать полностью квалифицированное имя плагина, включая версию:
mvn org.apache.maven.plugins:maven-dependency-plugin:2.1:get \
-DrepoUrl=url \
-Dartifact=groupId:artifactId:version
UPDATE: со старыми версиями Maven (до версии 2.1) можно запускать dependency:get
в обычном режиме (без использования полного имени и версии), заставляя вашу копию maven использовать данную версию плагина.
Это можно сделать следующим образом:
1. Добавьте следующую строку в элемент
вашего файла ~/.m2/settings.xml
:
true
2. Добавьте файл ~/.m2/plugin-registry.xml
со следующим содержимым:
org.apache.maven.plugins
maven-dependency-plugin
2.1
Но это не похоже на работу с maven 2.1 / 2.2. На самом деле, согласно Введение в реестр плагинов , функции plugin-registry.xml
были переработаны (для переносимости), а реестр плагинов в настоящее время находится в состоянии полубесплатного состояния в Maven 2 . Поэтому я думаю, что мы должны использовать длинное имя на данный момент (при использовании плагина без pom, что является идеей dependency:get
).
Попробуйте, если у вас есть вопрос о том, как это работает, и я узнаю.
let self;
export default class ApiProduct extends Component {
constructor(){
super();
self = this;
this.state = {
productData: null;
};
}
FetchProduct=()=>{
fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
method:'GET',
})
.then((response) => response.json())
.then((res) =>{
self.setState({ productData: res});
});
}
render() {
this.FetchProduct();
console.warn(self.state.productData);
return (
<View/>
);
}
Я постараюсь сделать заказ в вашем коде. Выборка данных в методе рендеринга не очень хорошая идея, лучше использовать методы жизненного цикла, например componentDidMount
Чтобы обработать ваш результат запроса, установите поле состояния и в вашем рендере прочитайте данные из этого поля. Итак:
export default class ApiProduct extends Component {
constructor(){
super();
this.state = {
productData: undefined;
};
}
async componentDidMount(){
await this.fetchProduct();
}
fetchProduct = () => {
fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
method:'GET',
})
.then((response) => response.json())
.then((res) =>{
this.setState({
productData: res
})
})
}
render() {
const {productData} = this.state;
console.log(productData);
return (
<View/> // add here your code to render data properly
)
}}
Вот быстрый пример Экспо, который должен показать вам, как отобразить простой список. Не очень хорошая идея вызывать fetch внутри метода рендеринга, так как каждый повторный рендеринг будет вызывать fetch.
Вот пример закуски https://snack.expo.io/S1-LKIyQE
import React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
productData: []
}
}
async componentDidMount () {
await this.getData();
}
async getData() {
try {
let url ='https://drawtopic.in/projects/wordpress/wp-json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b'
let response = await fetch(url, { method:'GET' });
let responseJson = await response.json();
this.setState({productData: responseJson});
} catch (err) {
console.warn(err);
}
}
renderItem = ({item}) => {
return (
<View style={styles.mainItem}>
<Text>{item.name}</Text>
</View>
);
}
keyExtractor = (item, index) => {
return index.toString();
}
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
extraData={this.state}
data={this.state.productData}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},
mainItem: {
width:200,
height: 80,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
backgroundColor: 'yellow',
borderColor: 'black',
borderWidth: 1
},
});
Здесь я использовал async/await
, так как он может сделать для намного более чистого и ясного кода. Это отличная статья о различиях между promises
и async/await
https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8 [ 116].
Я также дал вам быстрый пример того, как использовать FlatList для отображения ваших данных. Вы должны проверить документы о том, как правильно его использовать https://facebook.github.io/react-native/docs/flatlist
Если вы хотите изменить способ отображения каждого элемента на экране необходимо обновить метод renderItem
.