Динамический рендеринг данных таблицы реагирует на нативный

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