React native 如何在react native中使用水平平面列表生成多行

我想在我的应用程序中创建具有多行的水平平面列表，但输出仅为一行，如何使其成为多行

我曾尝试将this.state.products设置为阵列，并将其拼接为每个阵列3个大小，但没有改变

constructor() {
    super();
    this.state = {
        products = products
    }
}

render() {
    var arrays = [], size = 3;
    while(this.state.products.length > 0)
        arrays.push(this.state.products.splice(0, size)
    return(
         <FlatList
             horizontal={true}
             data={arrays}
             keyExtractor={(item, index) => index.toString()}
             renderItem={({item, index}) => (
                 <Text>{item[0].name}</Text>
                 <Text>{item[0].description}</Text>
                 {item.length > 1 ?
                     <Text>{item[1].name}</Text>
                     <Text>{item[1].description}</Text>
                 : null}
                 {item.length > 2 ?
                     <Text>{item[2].name}</Text>
                     <Text>{item[2].description}</Text>
                 : null}
             )}
         />
    )
}

constructor（）{
超级（）；
此.state={
产品=产品
}
}
render（）{
变量数组=[]，大小=3；
而（this.state.products.length>0）
数组.push（此.state.products.splice（0，大小）
返回(
index.toString（）}
renderItem={（{item，index}）=>(
{item[0].name}
{项[0]。说明}
{item.length>1？
{item[1]。name}
{项目[1]。说明}
：null}
{item.length>2？
{项目[2]。名称}
{项目[2]。说明}
：null}
)}
/>
)
}

我希望在第一列中有3行，每行包含不同的产品数据。如果有3行，它将再次移动到下一列中的3行

---

尝试使用FlatList的

numColumns

属性。将“水平”设置为false，然后指定所需的每列数

---

以下是文档：

这可能有点麻烦，但是在一次迭代中呈现两个项目就可以了

<FlatList
              keyExtractor={(item, index) => title + item.goodsNo.toString()}
              showsHorizontalScrollIndicator={false}
              horizontal
              removeClippedSubviews={true}
              contentContainerStyle={{ marginTop: 0, }}
              style={{ width: width, alignSelf: 'center', backgroundColor: '#fff' }}
              data={recentlyOpened}
              renderItem={function ({ item, index }) {
                return (

                  <View>
                    {recentlyOpened[index * 2] && recentlyOpened[(index * 2) + 1] ?
                      <View style={{ marginLeft: 16 }}>
                        <View style={{ marginBottom: 18 }}>
                          {renderSingleColumn(navigation, recentlyOpened[index * 2], this.props.getOpenedItems, index)}
                        </View >
                        {renderSingleColumn(navigation, recentlyOpened[(index * 2) + 1], this.props.getOpenedItems,index)}
                      </View>
                      :
                      null}
                  </View>

                )
              }.bind(this)}

            />

title+item.goodsNo.toString（）}
showshorizontalscrolindicator={false}
水平的
RemoveClippedSubview={true}
contentContainerStyle={{marginTop:0，}
样式={{width:width，alignSelf:'center'，backgroundColor:'#fff'}}
数据={recentlyOpened}
renderItem={function（{item，index}）{
返回(
{最近开放的[索引*2]&&最近开放的[（索引*2）+1]？
{renderSingleColumn（导航，最近打开的[index*2]，this.props.getOpenedItems，index）}
{renderSingleColumn（导航，最近打开的[（索引*2）+1]，this.props.getOpenedItems，索引）}
:
空}
)
}.bind（这个）}
/>

我考虑过这一点，但我想要像上面问题的图像一样的输出，因此在产品的最终数据可以嵌套FlatList之前，numColumns是未定义的。一个FlatList是水平的，另一个是垂直的。Probrem是数据必须是嵌套数组，如下[[1,2,3,4]，[1,2,3,4]，[1,2,3,4]]@sonicmario在我使用FlatList之前如何嵌套对象数组？您可以使用reduce、fliter或map.array1=[]array2=[]originalArray.map（value=>{if（conditionA）{array1.push（value）}else{array2.push（value）}）array=[array1，array2]谢谢您的回答，我的问题用ehutchllew的答案解决了