簡體   English   中英

React Native FlatList 中的 JSON

[英]JSON in React Native FlatList

我想在React Native中解析Woocomerce API響應。

誰能告訴如何從下面提到的JSON響應中解析React Native FlatList中的id, name, categories數組和images數組。

{
   "id":794,
   "name":"Premium Quality",
   "catalog_visibility":"visible",
   "price":"21.99",
   "regular_price":"21.99",
   "sale_price":"",
   "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":""
      }
   ]
}

您可以將 JSON 存儲在 var(例如myJSON )中,並在FlatList JSON.parse

這是最簡單的方法。 實現之后,您可以使用useEffectuseState來提高性能,以避免不必要的重新渲染。

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

// JSON.stringify only used here to simulate a true JSON
const myJson = JSON.stringify([
  {
    "id": 794,
    "name": "Premium Quality",
    "catalog_visibility": "visible",
    "price": "21.99",
    "regular_price": "21.99",
    "sale_price": "",
    "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": ""
      }
    ]
  }
]);

function Item({ item }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{item.name} - {item.price}</Text>

      <View style={{ flex: 1 }}>
        <Text>Categories: </Text>

        {item.categories.map((category) => {
          return (
            <Text>{category.name}</Text>
          )
        })}
      </View>

      <View style={{ flex: 1 }}>
        <Text>Images: </Text>

        {item.images.map((image) => {
          return (
            <Text>Image src: {image.src}</Text>
          )
        })}
      </View>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={JSON.parse(myJson)}
        renderItem={Item}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});


暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM