React Native Flatlist 中的网格视图

Question

如何在 FlatList 组件的 React Native 中实现这样的视图？

通常在网络中使用 css 网格很容易，但我无法在本机反应中做到这一点。

Answer 1

如果你想渲染一个 n by n 网格，你可以使用 FlatList 的 numColumns 属性。然后您可以将数据传递到 FlatList 的 data 属性以指定如何通过传递 renderItem 属性.[=19 中的函数来呈现网格中的每个单元格=]

一个粗略的例子是这样的：

import { FlatList } from "react-native";

<FlatList 
  data={myData}
  numColumns={3}
  renderItem={({ item }) => <MyCellComponent cellData={item} />}
/>

但是，您的问题有点不同，因为您想要渲染不均匀的网格。您可以将网格划分为两个单独的组件，ComponentA 和 ComponentB，并在 ScrollView 中渲染它们。

粗略的代码示例如下所示：

import { ScrollView } from "react-native";

<ScrollView>
  <ComponentA />
  <ComponentB />
  <ComponentA />
</ScrollView>

尽管如此，如果您真的想使用 FlatList，那么您可以创建第三个组件 ComponentC，它基本上会像这样包装前面的示例：

import { View } from "react-native";

function ComponentC() {
  return (
    <View>
      <ComponentA />
      <ComponentB />
      <ComponentA />
    </View>
  );
}

然后在 FlatList 中渲染它：

<FlatList 
  data={myData}
  renderItem={({ item }) => (<ComponentC data={item} />)}
/>

React Native Flatlist 中的网格视图

Grid view in React Native Flatlist

gridview

react-native