javascript - 在 Flatlist React Native 中解析 JSON 对象
问题描述
我是 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>
);
}
}
解决方案
我知道这是一个老问题,但答案可能对像我这样的其他人有帮助。我在使用 WC api 时也遇到过这种情况。解决方案是使用
const image = item.images.slice(0,1).pop();
从内部图像数组中获取第一个对象并使用
<Image
source={{ uri: image.src }}
resizeMode={'contain'}
style={{flex:1, width: '100%', height: 150 }}
/>
推荐阅读
- javascript - 如何使用 javascript 和 HTML 在浏览器上打印消息
- javascript - 用户未在组件的地图内定义
- python-3.x - 安装 Python 库的位置
- apache-flink - Flink keyBy:键太多?
- php - 语言环境定义的 Laravel 字体
- nginx - NGinx 发送 307 而不是 401
- perl - 试图从动态 NF 文件中获取最后 4 个不同的值
- ios - iOS / Swift 中的 3D 动画文本,就好像它是写在一个看不见的旋转卫生纸卷上一样
- python-3.x - 将 pynacl 中的 45 字节共享密钥转换为 32 字节密钥,以便与 25 字节 IV 的 AES-CBC 一起使用
- android - Android 应用程序在完成活动时冻结,runOnUiThread() 停止工作