React Native 水平 FlatList 多行 [英] React Native horizontal FlatList with multiple rows

问题描述

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

I'm trying to implement a horizontal scrolling list that has two rows. Using FlatList, the vertical scrolling list involves setting numColumns but there is no equivalent for using rows with horizontal.

我成功地使其正确呈现，并且完美无缺.但是，会抛出一个警告，指出 VirtualizedList 或 FlatList 不支持设置 flexWrap，并且不支持使用 numColumns.我不能使用 numColumns，因为它不适用于水平列表.

I was successfully able to make it render properly, and it works flawlessly. However, a warning gets thrown saying setting flexWrap is not supported in VirtualizedList or FlatList, and to use numColumns. I cannot use numColumns as that is not meant for horizontal lists.

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

我找到了添加此警告的提交，但找不到其背后的原因.似乎没有办法在不发出警告的情况下完成这项工作，至少没有完全放弃 FlatList.有行的水平列表有更合适的解决方案吗?

I found the commit where this warning was added, but cannot find the reasoning behind it. There seems to be no way to make this work without a warning being thrown, at least without ditching FlatList entirely. Is there a more appropriate solution for horizontal lists with rows?

参考:

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

推荐答案

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

Please do not use horizontal={true}. For this case you should use numColumns equal to the length of data / 2, and add a <ScrollView> tag. Forcing the number of columns to be half the total will force the list to wrap to the next line.

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

这篇关于React Native 水平 FlatList 多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！