用多行反应原生水平 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

原文由 Kenny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

更新 1：在 Alex Aung 评论之后编辑 listData.length / 2 -> Math.ceil(listData.length / 2) 。谢谢@alex-aung

原文由 tuanngocptn 发布，翻译遵循 CC BY-SA 4.0 许可协议