如何在 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 行。

我想要的輸出

Answer 1

嘗試使用 FlatList 的numColumns屬性。 將水平設置為 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)}

            />

Answer 3

我為此創建了一個庫。 只需要指定行數。

https://www.npmjs.com/package/@idiosync/horizontal-flatlist