React Native Flat List 自定义网格

Question

我在 React Native 中使用平面列表，但我没有发现，如果可能的话，请制作一种网格，就像您在图像中看到的那样。我怎么能那样做？ （名单还在继续）

Answer 1

借助 numColumns 属性，可以呈现多列。

<FlatList
          data={listItems}
          numColumns={2}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={ItemView}
          keyExtractor={(item) => item.id.toString()}
/>

检查这个 example

Answer 2

好吧，我认为解决方案是为每个部分创建 ItemView，每个 ItemView 都是另一个水平滚动的 FlatList，所以基本上你会有一个垂直滚动的外部列表，其中每个项目都是水平滚动的 FlatList，由外部列表的索引。