如何创建具有多行和动态宽度的项目的水平 FlatList？答案

【问题标题】：How to create horizontal FlatList with multiple rows and items with dynamic width?如何创建具有多行和动态宽度的项目的水平 FlatList？
【发布时间】：2019-12-15 11:27:50
【问题描述】：

我想实现与此类似的东西：

效果类似于 Swift 中的 UICollectionView，带有自调整单元格。

我应该如何在 React Native 中实现这个？

设置numColumns 不会达到预期的效果，因为我需要每行动态数量的单元格。这会将我的值限制为numColumns。每行应该有尽可能多的项目。如果该行无法容纳更多，则添加到下一行。

谢谢！

【问题讨论】：

标签： react-native react-native-flatlist listitem

【解决方案1】：

您可以尝试使用flexWrap 样式。并将文本视图设置为固定高度。宽度是自动的。

<View style={[{flexDirection: 'row', flexWrap: ' wrap'}]}>
         data.map(element => {
           return <Text style={{height:100}}>element.content</Text>
         })
        </View>

【讨论】：

FlatList 重用项目以实现良好的内存管理。从这个角度来看，简单的观点并不理想。