REACT NATIVE：如何在 FlatList 中显示数据？答案

【问题标题】：REACT NATIVE : How can i display the data in FlatList?REACT NATIVE：如何在 FlatList 中显示数据？
【发布时间】：2021-02-03 08:09:51
【问题描述】：

如何在 FlatList 中显示“Parameter_Code”、“Parameter_Units”的数据？

“fieldTestList”是数据：

[{"Immediate_Report_Max": null, "Immediate_Report_Min": null, "Parameter_Code": "ECFD", "Parameter_Name": "Electrical conductivity in field at 25ºC", "Parameter_Units": "µmho/cm   "}, {"Immediate_Report_Max": null, "Immediate_Report_Min": "0", "Parameter_Code": "pHFD", "Parameter_Name": "pH in field", "Parameter_Units": "unit      "}, {"Immediate_Report_Max": null, "Immediate_Report_Min": null, "Parameter_Code": "T", "Parameter_Name": "Temperature", "Parameter_Units": "° C       "}]

这是我的代码：

import React, { useEffect, useState } from 'react';
import {
  Text,
  View,
} from 'react-native';
function debi() {
 const dispatch = useDispatch();
 
 useEffect(() => {
    (async () => {
      var fieldTestList = await getTestParamsByRequest(requestId);
      if (fieldTestList.length > 0) {
        setFieldTestDisplay(fieldTestList);
      }
    })();
  }, []);

function renderItem({ item, index }) {
 return (
<View>  </View>

);}
}

【问题讨论】：

在您的视图中，添加以下行fieldTestList.map(item => <Text>{item.Parameter_Code}</Text>
我需要 FLATLIST
首先向我们展示您已经尝试过的内容。查看此文档以更好地了解 FlatList 组件：reactnative.dev/docs/flatlist

标签： javascript reactjs react-native react-hooks react-native-flatlist

【解决方案1】：

import { ListItem } from 'react-native-elements'

<FlatList
        data={fieldTestList}
        keyExtractor={(item) => item.Parameter_Code}
        renderItem={({ item }) => (
            <ListItem bottomDivider >
    
    <ListItem.Content>
      <ListItem.Title>{item.Parameter_Units}</ListItem.Title>
      <ListItem.Subtitle>{item.Parameter_Code}</ListItem.Subtitle>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>

这应该让您了解如何创建平面列表

【讨论】：

【解决方案2】：

除了之前的答案，我可以给你另一个例子snack with example

【讨论】：