javascript - 如何在没有列表的情况下在react-native中显示JSON数据？

Question

我理解在 React Native 上开发应用程序，我遇到了显示数据的问题。

从服务器端传来json

[
  {
    "cell_name": "112185",
    "id": "000000005",
    "pallets": [
      {
        "id": "000000016",
        "items": [
          {
            "product_info": {
              "name": "first product name",
              "unit_info": {
                "name": "box"
              },
            },
            "count": 100
          },
          {
            "product_info": {
              "name": "second product name",
              "unit_info": {
                "name": "box"
              },
            },
            "count": 23
          },
          {
            "product_info": {
              "name": "third product name",
              "unit_info": {
                "name": "box"
              },
            },
            "count": 15
          }
        ]
      }
    ]
  }
]

我需要在屏幕上显示信息。

我尝试以这种方式显示，但失败了 - 什么也没有显示。

return (
        <PageView
             ...
        >
            <View>

                    { cells.map((cell, cell_i) => {
                        const cell_name = cell.name == '' ? 'Not cell' : cell.name;
                        return (<Text key={cell_i}>Cell {cell_name}</Text> &&
                            ( for (i in cell.pallets) {
                                const pallet = cell.pallets[i];
                                const pallet_name = pallet.id == '' ? 'Not pallet' : pallet.id;
                                return (<Text h2 key={cell_i+'.'+pallet_i}>Pallet {pallet_name}</Text> &&
                                    ( for(j in pallet.items) {
                                        const item = pallet.items[j];
                                        return (<Text key={cell_i+'.'+pallet_i+'.'+item_i}>{item.product_info.name} {item.count} {item.product_info.unit_info.name}</Text>);
                                    })
                                )
                            })
                       )
                    })}
            </View>
        </PageView>
        )

也许有人会告诉你如何正确显示这样的结构？

Answer 1

首先，将 JSON 转换为 JavaScript 数组。

var data = JSON.parse(jsonObj);

为了渲染数据，您可以简单地使用react-native Flatlist 在你的里面，

import {FlatList} from 'react-native';//首先从 React Native 导入 FlatList

<View>
      <FlatList
        data={data[0].pallets[0].items}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
      />
</View>

renderItem(item){
    //do your stuff here
    //you can render one by one here
}