React具有多行的Native水平FlatList

Question

我正在尝试实现一个有两行的水平滚动列表.使用FlatList,垂直滚动列表涉及设置,numColumns但没有使用水平行的等效项.

我成功地使它能够正确渲染,并且它完美无缺.但是,会抛出警告,flexWrap说不支持设置,VirtualizedList或FlatList使用numColumns.我不能使用numColumns,因为它不适用于水平列表.

<FlatList
    horizontal={true}
    contentContainerStyle={{
        flexDirection: 'column',
        flexWrap: 'wrap'
    }}
    {...otherProps}
/>

我发现了添加此警告的提交,但无法找到其背后的原因.似乎没有办法在没有警告被抛出的情况下完成这项工作,至少在没有完全放弃FlatList的情况下.对于包含行的水平列表,是否有更合适的解决方案？

参考文献:

• 提交添加警告:https://github.com/facebook/react-native/commit/eac399b
• FlatList文档:https://facebook.github.io/react-native/docs/flatlist.html

Answer 1

请不要使用horizontal={true}。对于这种情况，您应该使用numColumns等于数据长度/2，并添加一个<ScrollView>标签。强制列数为总数的一半将强制列表换行到下一行。

<ScrollView>
    <FlatList
        contentContainerStyle={{alignSelf: 'flex-start'}}
        numColumns={listData.length / 2}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        data={listData}
        renderItem={({ item, index }) => {
            //push your code
        }}
    />
</ScrollView>

Answer 2

增强第一个答案，这就是我所做的：

const listData = props.data ?? [];
const numColumns = Math.ceil(listData.length / 2);
        <ScrollView
          horizontal
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingVertical: 20 }}>
          <FlatList
            scrollEnabled={false}
            contentContainerStyle={{
              alignSelf: 'flex-start',
            }}
            numColumns={numColumns}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={listData}
            renderItem={renderItem}
          />
        </ScrollView>

Answer 3

我对一个不那么长的项目列表（几百个）也遇到了同样的问题，我通过检查列表将它们映射到多个视图来克服这个问题，每个视图有 2 个项目一个接一个（使用 Flex 的列）

如果您的列表不太长，您也可以使用ScrollView它，它支持flexWrap