React Native Flatlist 中的网格视图

Question

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

通常在网络中使用CSS网格很容易，但我无法在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} />)}
/>

Answer 2

另一种可能的解决方案是使用 FlashList https://shopify.github.io/flash-list/docs/guides/masonry

import React from "react";
import { View, Text, StatusBar } from "react-native";
import { MasonryFlashList } from "@shopify/flash-list";
import { DATA } from "./data";

const MyMasonryList = () => {
  return (
    <MasonryFlashList
      data={DATA}
      numColumns={2}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

Answer 3

我们可以使用FlatList来均匀地生成网格视图和空间。

<FlatList
  data={ITEMS}
  numColumns={3}
  keyExtractor={(item) => item.key}
  renderItem={({ item }) => <Item instance={item} />}
  contentContainerStyle={styles.flat_list}
  columnWrapperStyle={styles.flat_list}
/>


const styles = StyleSheet.create({ 
  flat_list: {
    flex: 1,
    gap: 16,
  },
});