如何在React Native中使用水平平面列表制作多行

Question

我想在我的应用程序中创建包含多行的水平平面列表，但是输出仅为一行，如何使它成为多行？

我试图使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}
             )}
         />
    )
}

我希望第一栏中有3行，每行中有不同的产品数据。如果它有3行，它将再次移至具有3行的下一列。

The ouput that I want

Answer 1

尝试使用FlatList的numColumns属性。将horizo​​ntal设置为false，然后指定您想要的每列数。

这里是文档：FlatList numColumns

Answer 2

这可能很hacky，但是一次迭代渲染两个项目就可以了。

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

            />