动态表数据渲染 react native答案

【问题标题】：Dynamic table data rendering react native动态表数据渲染 react native
【发布时间】：2019-06-27 09:43:30
【问题描述】：

我想以表格的形式实现数据渲染，如下所示：

我有一个数据（存储在变量“myData”中）的形式：

{
 "id":0,
 "name": ["wheat", "Rice", "Sugar"],
 "Quality":["Good", "good","good"],
 "Quantity":["200","200","200"]
}

我尝试将 and 映射在一起来实现这一点，但它会将数据水平呈现在一行中。

这是迄今为止我尝试用最少的测试代码实现的目标。

return (
            <View style={{flexDirection:'column'}}>{myData.map( (item) => {
                return (
                    <View key={item.id}>
                        <View>
                            <Text>
                                {item.name}
                            </Text>
                        </View>
                        <View>
                            <Text >
                                {item.Quality}
                            </Text>
                        </View>
                    </View>

                )
            })}

            </View>
        )

请帮助实现这一目标

【问题讨论】：

标签： list react-native html-table

【解决方案1】：

将每个数组映射到它自己的视图中并使用flexDirection: "row"

const list = myData.map(item => {
  return (
    <View style={{ flexDirection: 'row'}}>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{i + 1}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{name}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quality.map((quality, i) => (
          <Text>{quality}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quantity.map((quantity, i) => (
          <Text>{`${quantity} Bags`}</Text>
        ))}
      </View>
    </View>
  );
});

【讨论】：

这行得通。你能解释一下吗？为什么我们需要遵循这种方法？我缺什么地方？
因为您有三个数组并且要显示数据，您需要遍历每个数组。 flowDirection: 'row' 将项目显示为行。
嘿，@Junius 可以检查这个问题，拜托！ stackoverflow.com/questions/57595796/…

【解决方案2】：

Try this,

    return (
                <View style={{flexDirection:'column'}}>{myData.name.map( (item, index) => {
                    return (
                        <View key={item.id}>
                            <View>
                                <Text>
                                    {item}
                                </Text>
                            </View>
                            <View>
                                <Text >
                                    {myData.Quality[index]}
                                </Text>
                            </View>
 <View>
                                <Text >
                                    {myData.Quantity[index]}
                                </Text>
                            </View>
                        </View>

                    )
                })}

                </View>
            )

【讨论】：

我厌倦了这个但没有工作。当我的数组在没有任何关键对象名称的情况下开始时，对“myData.name.map()”的需求是什么
我认为 myData 是你的字典。如果是这样，我首先拿起您的数组“名称”并尝试映射。
我编辑了我的问题。 myData 是我存储数据的变量名 /array