React Native Flatlist 中的网格视图

Question

我怎样才能在 FlatList 组件中的 react native 中实现这样的视图？

通常在 web 中使用 css grid 很容易，但我无法在 react native 中做到这一点。

Answer 1

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

一个粗略的例子如下所示：

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} />)}
/>