Question

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

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

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

我尝试将和映射在一起以实现此目的，但是它将数据水平呈现在一行中。

到目前为止，这是我试图用最少的测试代码实现的目标。

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

请帮助实现这一目标

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

Answer 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>
            )

动态表数据呈现本机反应

2 个答案: