[你好朋友,我是React Native的新手,我正在开发像电子商务应用程序一样的Appliction,我正在使用Woocommerce(Wordpress)作为后端,并通过Woocomrce Api Response我试图在我的React Native应用程序中实现,但是我遇到一个问题,解析JSON,基本上我不知道如何解析平面列表中的图像数组,我的代码和API Respose在下面提到,我提醒您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对象传递给了平面列表,这就是为什么它不呈现任何内容的原因。另外,您应该向图像传递高度和宽度,否则它将不会显示。