在 Flatlist React Native 中解析 JSON 对象
Parse JSON object in Flatlist React Native
我是 React Native 的新手，我正在开发电子商务应用程序之类的应用程序，我正在使用 Woocommerce (Wordpress) 作为后端，并通过 Woocomrce Api 响应尝试在我的 React Native 应用程序中实现，但我在解析 JSON 时遇到一个问题。基本上我不知道如何解析平面列表中的图像数组。下面提到了我的代码和 API 响应，我提醒你 item.images[0].src 不起作用。
提前谢谢你。
我的 Woocommerce API 响应
{
"id": 794,
"name": "Premium Quality",
"slug": "premium-quality-19",
"permalink": "https://example.com/product/premium-quality-19/",
"date_created": "2017-03-23T17:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T17:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"type": "simple",
"status": "publish",
"featured": false,
"catalog_visibility": "visible",
"description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
"short_description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>\n",
"sku": "",
"price": "21.99",
"regular_price": "21.99",
"sale_price": "",
"date_on_sale_from": null,
"date_on_sale_from_gmt": null,
"date_on_sale_to": null,
"date_on_sale_to_gmt": null,
"price_html": "<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">$</span>21.99</span>",
"on_sale": false,
"purchasable": true,
"total_sales": 0,
"virtual": false,
"downloadable": false,
"downloads": [],
"download_limit": -1,
"download_expiry": -1,
"external_url": "",
"button_text": "",
"tax_status": "taxable",
"tax_class": "",
"manage_stock": false,
"stock_quantity": null,
"stock_status": "instock",
"backorders": "no",
"backorders_allowed": false,
"backordered": false,
"sold_individually": false,
"weight": "",
"dimensions": {
"length": "",
"width": "",
"height": ""
},
"shipping_required": true,
"shipping_taxable": true,
"shipping_class": "",
"shipping_class_id": 0,
"reviews_allowed": true,
"average_rating": "0.00",
"rating_count": 0,
"related_ids": [
53,
40,
56,
479,
99
],
"upsell_ids": [],
"cross_sell_ids": [],
"parent_id": 0,
"purchase_note": "",
"categories": [
{
"id": 9,
"name": "Clothing",
"slug": "clothing"
},
{
"id": 14,
"name": "T-shirts",
"slug": "t-shirts"
}
],
"tags": [],
"images": [
{
"id": 792,
"date_created": "2017-03-23T14:01:13",
"date_created_gmt": "2017-03-23T20:01:13",
"date_modified": "2017-03-23T14:01:13",
"date_modified_gmt": "2017-03-23T20:01:13",
"src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
"name": "",
"alt": ""
},
{
"id": 793,
"date_created": "2017-03-23T14:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T14:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
"name": "",
"alt": ""
}
],
"attributes": [],
"default_attributes": [],
"variations": [],
"grouped_products": [],
"menu_order": 0,
"meta_data": [],
"_links": {
"self": [
{
"href": "https://example.com/wp-json/wc/v3/products/794"
}
],
"collection": [
{
"href": "https://example.com/wp-json/wc/v3/products"
}
]
}
}
我的APP.js代码
import React, { Component } from 'react';
import { View, Text, Image, Dimensions, ActivityIndicator, StatusBar, FlatList } from 'react-native';
import WooCommerceAPI from 'react-native-woocommerce-api';
var WooCommerceApp = new WooCommerceAPI({
url: 'http://store.oruga.in/', // Your store URL
ssl: true,
consumerKey: 'ck_113e04d8a91ce34cbfeaf21971b6d5e18e7XXXXX', // Your consumer secret
consumerSecret: 'cs_fd0f4b6a5573837b1f7732a98dccb355a233XXXXX', // Your consumer secret
wpAPI: true, // Enable the WP REST API integration
version: 'wc/v3', // WooCommerce WP REST API version
queryStringAuth: true
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
responsedata: [],
loading: true
};
WooCommerceApp.get('products/')
.then(data => {
this.setState({ responsedata: data }, () => {
this.setState({ loading: false });
});
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<View>
<StatusBar hidden />
{this.state.loading === true ? (
<View style={{ justifyContent: 'center', alignItems: 'center', height: Dimensions.get('window').height }}>
<ActivityIndicator size="large" color="#0f3443" />
</View>
) : (
<View>
<FlatList
data={this.state.responsedata}
keyExtractor={this._keyExtractor}
renderItem={({ item }) => (
<View>
<Image source={{ uri: item.images[0].src }} />
<Text >{item.name}</Text>
</View>
)} />
</View>)
}
</View>
);
}
}
您应该将数组作为数据传递给您的 FlatList，在您的示例中，您将 JSON 对象传递给平面列表，这就是它不呈现任何内容的原因。另外，你应该将高度和宽度传递给你的图像，否则它不会显示。
像这样更改你的平面列表，它应该可以工作。
<View>
<FlatList
data={this.state.responsedata.images}
keyExtractor={item => `${item.id}`}
renderItem={({ item }) => (
<View>
<Image style={{ height: 100, width: 100 }} source={{ uri: item.src }} />
<Text>{item.name}</Text>
</View>
)}
/>
</View>
另外，不要在构造函数中调用 setState，它会显示警告。将 api 调用移动到 componentDidMount 函数：
componentDidMount() {
WooCommerceApp.get('products/')
.then((data) => {
this.setState({ responsedata: data }, () => {
this.setState({ loading: false });
});
})
.catch((error) => {
console.log(error);
});
}
编辑：
如果您需要响应 json 那么您就不需要 FlatList，FlatList 用于显示项目列表。如果您只想显示第一张图片，请像这样更改 FlatList
<Image style={{ height: 100, width: 100 }} source={{ uri: this.state.responsedata.images[0].src }} />
我知道这是一个老问题，但答案可能对像我这样的人有帮助。
我在使用 WC api 时也遇到过这种情况。
解决方案是使用
const image = item.images.slice(0,1).pop();从内部图像数组中获取第一个对象并使用
显示它
<Image
source={{ uri: image.src }}
resizeMode={'contain'}
style={{flex:1, width: '100%', height: 150 }}
/>
我是 React Native 的新手，我正在开发电子商务应用程序之类的应用程序，我正在使用 Woocommerce (Wordpress) 作为后端，并通过 Woocomrce Api 响应尝试在我的 React Native 应用程序中实现，但我在解析 JSON 时遇到一个问题。基本上我不知道如何解析平面列表中的图像数组。下面提到了我的代码和 API 响应，我提醒你 item.images[0].src 不起作用。
提前谢谢你。
我的 Woocommerce API 响应
{
"id": 794,
"name": "Premium Quality",
"slug": "premium-quality-19",
"permalink": "https://example.com/product/premium-quality-19/",
"date_created": "2017-03-23T17:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T17:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"type": "simple",
"status": "publish",
"featured": false,
"catalog_visibility": "visible",
"description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
"short_description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>\n",
"sku": "",
"price": "21.99",
"regular_price": "21.99",
"sale_price": "",
"date_on_sale_from": null,
"date_on_sale_from_gmt": null,
"date_on_sale_to": null,
"date_on_sale_to_gmt": null,
"price_html": "<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">$</span>21.99</span>",
"on_sale": false,
"purchasable": true,
"total_sales": 0,
"virtual": false,
"downloadable": false,
"downloads": [],
"download_limit": -1,
"download_expiry": -1,
"external_url": "",
"button_text": "",
"tax_status": "taxable",
"tax_class": "",
"manage_stock": false,
"stock_quantity": null,
"stock_status": "instock",
"backorders": "no",
"backorders_allowed": false,
"backordered": false,
"sold_individually": false,
"weight": "",
"dimensions": {
"length": "",
"width": "",
"height": ""
},
"shipping_required": true,
"shipping_taxable": true,
"shipping_class": "",
"shipping_class_id": 0,
"reviews_allowed": true,
"average_rating": "0.00",
"rating_count": 0,
"related_ids": [
53,
40,
56,
479,
99
],
"upsell_ids": [],
"cross_sell_ids": [],
"parent_id": 0,
"purchase_note": "",
"categories": [
{
"id": 9,
"name": "Clothing",
"slug": "clothing"
},
{
"id": 14,
"name": "T-shirts",
"slug": "t-shirts"
}
],
"tags": [],
"images": [
{
"id": 792,
"date_created": "2017-03-23T14:01:13",
"date_created_gmt": "2017-03-23T20:01:13",
"date_modified": "2017-03-23T14:01:13",
"date_modified_gmt": "2017-03-23T20:01:13",
"src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
"name": "",
"alt": ""
},
{
"id": 793,
"date_created": "2017-03-23T14:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T14:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
"name": "",
"alt": ""
}
],
"attributes": [],
"default_attributes": [],
"variations": [],
"grouped_products": [],
"menu_order": 0,
"meta_data": [],
"_links": {
"self": [
{
"href": "https://example.com/wp-json/wc/v3/products/794"
}
],
"collection": [
{
"href": "https://example.com/wp-json/wc/v3/products"
}
]
}
}
我的APP.js代码
import React, { Component } from 'react';
import { View, Text, Image, Dimensions, ActivityIndicator, StatusBar, FlatList } from 'react-native';
import WooCommerceAPI from 'react-native-woocommerce-api';
var WooCommerceApp = new WooCommerceAPI({
url: 'http://store.oruga.in/', // Your store URL
ssl: true,
consumerKey: 'ck_113e04d8a91ce34cbfeaf21971b6d5e18e7XXXXX', // Your consumer secret
consumerSecret: 'cs_fd0f4b6a5573837b1f7732a98dccb355a233XXXXX', // Your consumer secret
wpAPI: true, // Enable the WP REST API integration
version: 'wc/v3', // WooCommerce WP REST API version
queryStringAuth: true
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
responsedata: [],
loading: true
};
WooCommerceApp.get('products/')
.then(data => {
this.setState({ responsedata: data }, () => {
this.setState({ loading: false });
});
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<View>
<StatusBar hidden />
{this.state.loading === true ? (
<View style={{ justifyContent: 'center', alignItems: 'center', height: Dimensions.get('window').height }}>
<ActivityIndicator size="large" color="#0f3443" />
</View>
) : (
<View>
<FlatList
data={this.state.responsedata}
keyExtractor={this._keyExtractor}
renderItem={({ item }) => (
<View>
<Image source={{ uri: item.images[0].src }} />
<Text >{item.name}</Text>
</View>
)} />
</View>)
}
</View>
);
}
}
您应该将数组作为数据传递给您的 FlatList，在您的示例中，您将 JSON 对象传递给平面列表，这就是它不呈现任何内容的原因。另外，你应该将高度和宽度传递给你的图像，否则它不会显示。
像这样更改你的平面列表，它应该可以工作。
<View>
<FlatList
data={this.state.responsedata.images}
keyExtractor={item => `${item.id}`}
renderItem={({ item }) => (
<View>
<Image style={{ height: 100, width: 100 }} source={{ uri: item.src }} />
<Text>{item.name}</Text>
</View>
)}
/>
</View>
另外，不要在构造函数中调用 setState，它会显示警告。将 api 调用移动到 componentDidMount 函数：
componentDidMount() {
WooCommerceApp.get('products/')
.then((data) => {
this.setState({ responsedata: data }, () => {
this.setState({ loading: false });
});
})
.catch((error) => {
console.log(error);
});
}
编辑： 如果您需要响应 json 那么您就不需要 FlatList，FlatList 用于显示项目列表。如果您只想显示第一张图片，请像这样更改 FlatList
<Image style={{ height: 100, width: 100 }} source={{ uri: this.state.responsedata.images[0].src }} />
我知道这是一个老问题，但答案可能对像我这样的人有帮助。 我在使用 WC api 时也遇到过这种情况。 解决方案是使用
const image = item.images.slice(0,1).pop();从内部图像数组中获取第一个对象并使用
<Image
source={{ uri: image.src }}
resizeMode={'contain'}
style={{flex:1, width: '100%', height: 150 }}
/>