Question

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

我试图使this.state.products进行排列并以每个数组3个大小对其进行拼接，但是并没有改变。

const delay = t => new Promise(res => setTimeout(res, t));

(async _ => { // declare as async (as we need to use await)
  console.log("Hello");
  await delay(2000); // 2000 m/s (2 second) delay
  console.log("World!");
})();

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

The ouput that I want

Answer 1

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

以下是文档：FlatList numColumns

Answer 2

这可能很麻烦，但是一次迭代即可渲染两个项目。

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

            />

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

2 个答案: