Fatal编程技术网
  • javascript/
  • Javascript 在Flatlist React Native中解析JSON对象

Javascript 在Flatlist React Native中解析JSON对象

javascript json react-native

Javascript 在Flatlist React Native中解析JSON对象,javascript,json,react-native,react-native-android,react-native-flatlist,Javascript,Json,React Native,React Native Android,React Native Flatlist,我是React Native的新手，我正在开发一个类似于电子商务应用程序的应用程序，我使用Woocommerce（Wordpress）作为后端，并通过WooComerce Api响应尝试在我的React Native应用程序中实现，但我在解析JSON时遇到一个问题。基本上我不知道如何解析平面列表中的图像数组。下面提到了我的代码和API响应，我提醒您，item.images[0].src不工作。 先谢谢你 我的商业API响应 { "id": 794, "name": "Premium Qu

我是React Native的新手，我正在开发一个类似于电子商务应用程序的应用程序，我使用Woocommerce（Wordpress）作为后端，并通过WooComerce Api响应尝试在我的React Native应用程序中实现，但我在解析JSON时遇到一个问题。基本上我不知道如何解析平面列表中的图像数组。下面提到了我的代码和API响应，我提醒您，
item.images[0].src
不工作。 先谢谢你

我的商业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\">&#36;</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"
      }
    ]
  }
}

 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>
        );
    }
}

{
“id”：794，
“名称”：“优质”，
“slug”：“优质-19”，
“永久链接”：https://example.com/product/premium-quality-19/",
“创建日期”：“2017-03-23T17:01:14”，
“创建日期”：“2017-03-23T20:01:14”，
“修改日期”：“2017-03-23T17:01:14”，
“修改日期”：“2017-03-23T20:01:14”，
“类型”：“简单”，
“状态”：“发布”，
“特色”：假，
“目录可见性”：“可见”，
“描述”：“佩伦特式居住者莫比·特里斯蒂克·塞内特斯和马莱苏达·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃吉斯塔斯·埃斯特、埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃吉斯·埃米特、临时埃米特·埃米特·埃米特、安特·埃斯·埃斯·，
“简短描述”：“佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames ac turpis egestas.
\n”，
“sku”：“，
“价格”：“21.99”，
“正常价格”：“21.99”，
“售价”：“，
“销售日期自”：空，
“自格林威治标准时间起的销售日期”：空，
“出售日期”：空，
“出售给gmt的日期”：空，
“价格”html“$；21.99”，
“在售”：假，
“可购买”：没错，
“总销售额”：0，
"虚":假,，
“可下载”：false，
“下载”：[]，
“下载限制”：-1，
“下载到期”：-1，
“外部url”：“，
“按钮文本”：“，
“税务状况”：“应税”，
“税项类别”：“，
“管理库存”：错误，
“库存数量”：空，
“库存状态”：“库存”，
“延期交货”：“否”，
“允许延期交货”：错误，
“缺货”：错误，
“单独出售”：错误，
“重量”：“，
“尺寸”：{
“长度”：“，
“宽度”：“，
“高度”：”
},
“需要装运”：正确，
“运输税”：正确，
“装运类别”：“，
“装运类别id”：0，
“允许评论”：正确，
“平均等级”：“0.00”，
“评级计数”：0，
“相关_id”：[
53,
40,
56,
479,
99
],
“向上销售标识”：[]，
“交叉销售标识”：[]，
“父项id”：0，
“购买说明”：“购买说明”，
“类别”：[
{
“id”：9，
“姓名”：“服装”，
“鼻涕虫”：“衣服”
},
{
“id”：14，
“姓名”：“T恤”，
“鼻涕虫”：“t恤”
}
],
“标签”：[]，
“图像”：[
{
“id”：792，
“创建日期”：“2017-03-23T14:01:13”，
“创建日期”：“2017-03-23T20:01:13”，
“修改日期”：“2017-03-23T14:01:13”，
“修改日期”：“2017-03-23T20:01:13”，
“src”：https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
“名称”：“，
“alt”：”
},
{
“id”：793，
“创建日期”：“2017-03-23T14:01:14”，
“创建日期”：“2017-03-23T20:01:14”，
“修改日期”：“2017-03-23T14:01:14”，
“修改日期”：“2017-03-23T20:01:14”，
“src”：https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
“名称”：“，
“alt”：”
}
],
“属性”：[]，
“默认_属性”：[]，
“变更”：[]，
“分组产品”：[]，
“菜单顺序”：0，
“元数据”：[]，
“_链接”：{
“自我”：[
{
“href”：”https://example.com/wp-json/wc/v3/products/794"
}
],
“收藏”：[
{
“href”：”https://example.com/wp-json/wc/v3/products"
}
]
}
}
我的APP.js代码

{
  "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\">&#36;</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"
      }
    ]
  }
}

 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>
        );
    }
}

import React，{Component}来自'React'；
从“react native”导入{视图、文本、图像、维度、ActivityIndicator、状态栏、平面列表}；
从“react native woocommerce api”导入WooCommerceAPI；
var WooCommerceApp=新的WooCommerceAPI({
网址：'http://store.oruga.in/“，//您的商店URL
是的，
consumerKey:“ck_113e04d8a91ce34cbfeaf21971b6d5e18e7XXXXX”//您的消费者秘密
消费者密码：“cs_fd0f4b6a5573837b1f7732a98dccb355a233XXXXX”//您的消费者密码
wpAPI:true，//启用WP-restapi集成
版本：'wc/v3'，//WooCommerce WP REST API版本
queryStringAuth:true
});
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
答复数据：[]，
加载：正确
};
WooCommerceApp.get（'products/'））
。然后（数据=>{
this.setState（{responsedata:data}，（）=>{
this.setState（{loading:false}）；
});
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
返回(
{this.state.loading==true(
) : (
(
{item.name}
)} />
)
}
);
}
}
您应该将一个数组作为数据传递给您的
平面列表，在您的示例中，您将一个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>


编辑：
如果您需要响应json，那么您不需要FlatList，FlatList将显示项目列表。如果你想只显示第一张图片，那么像这样改变你的平面列表


<Image style={{ height: 100, width: 100 }} source={{ uri: this.state.responsedata.images[0].src }} />





tha