FlatList 有什么用？

在本文中，我们将了解 FlatList 组件的使用。那么首先让我们知道什么是 FlatListt？FlatList 组件是一种在可滚动列表视图中显示项目的有效方式。该组件具有许多支持的功能，例如滚动加载、页眉/页脚视图支持、水平模式、拉动刷新等。

句法：

在上面的语法中，我们可以看到 FlatList 组件有两个必需的 props，即 data 和 renderItem。

• 数据：它是一个项目或数据的数组。
• renderItem：用于将数据渲染到列表中。它基本上需要一个函数来从数据源中获取一个项目并返回要呈现的列表组件。

FlatList 组件的这两个 props 是强制使用的。 FlatList 组件中还有许多其他的 props 也可以使用。

FlatList 中的道具：

• renderItem：用于将数据渲染到列表中。
• 数据：它基本上是一个数据数组。
• ItemSeparatorComponent：用于在每个项目之间进行渲染。
• ListEmptyComponent：当列表为空时渲染。
• ListFooterComponent：它呈现在所有项目的底部。
• ListFooterComponentStyle：用于设置 ListFooterComponent 内部视图的样式。
• ListHeaderComponent：它呈现在所有项目的顶部。
• ListHeaderComponentStyle：用于设置内部视图 ListHeaderComponent 的样式。
• columnWrapperStyle：它是多项目行的可选自定义样式。
• extraData：它是告诉列表重新渲染的属性。
• getItemLayout：这是一个可选优化，如果您知道项目的大小，则允许跳过动态内容的测量。
• 水平：如果这是真的，那么项目将水平呈现而不是垂直呈现。
• initialNumToRender：它告诉在初始批次中要渲染多少项目。
• initialScrollIndex：如果提供，则不是从顶部项目开始，而是从 initialScrollIndex 项目开始。
• 反转：反转滚动的方向。
• keyExtractor：用于提取给定项目的唯一键。
• numColumns：用于渲染多列。
• onEndReached：当滚动位置进入渲染内容时调用一次。
• onEndReachedThreshold：它告诉我们距离终点还有多远。
• onRefresh ：如果提供，将添加标准 RefreshControl。
• onViewableItemsChanged：当行的可见性改变时调用。
• progressViewOffset：需要加载的偏移量时设置。它仅适用于安卓系统。
• 刷新：设置为真，同时等待来自刷新的新数据。
• removeClippedSubviews：这可能会提高大型列表的滚动性能。在 Android 上，默认值为 true。
• viewabilityConfigCallbackPairs：显示对的列表。

平面列表的用途：

• FlatList 用于在可滚动列表视图中呈现项目。
• 大数据：当我们有一个大数据列表并且数据数量可以随时间变化时，我们可以使用 FlatList，因为大数据会影响渲染速度，而使用 FlatList 不会影响渲染速度。
• 当我们只想渲染当前正在屏幕上显示的那些元素时使用 FlatList（默认值：10 个项目）。
• 对于自动内存管理和处理列表中的数据更改，我们使用平面列表。
• 当我们想要使用 ItemSeparatorComponent 属性的列表项之间的分隔符时，可以使用 FlatList。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。

npm install -g expo-cli

第2步：现在通过以下命令创建一个项目。

expo init myapp

第 3 步：现在进入您的项目文件夹，即 myapp

cd myapp

项目结构：

女朋友

示例 1：在此示例中，我们创建了一个简单的平面列表。

App.js

import { FlatList, StyleSheet, Text, View } from "react-native";
  
const DATA = [
    {
      id:"1",
      title:"Data Structures"
    },
    {
      id:"2",
      title:"STL"
    },
    {
      id:"3",
      title:"C++"
    },
    {
      id:"4",
      title:"Java"
    },
    {
      id:"5",
      title:"Python"
    },
    {
      id:"6",
      title:"CP"
    },
    {
      id:"7",
      title:"ReactJs"
    },
    {
      id:"8",
      title:"NodeJs"
    },
    {
      id:"9",
      title:"MongoDb"
    },
    {
      id:"10",
      title:"ExpressJs"
    },
    {
      id:"11",
      title:"PHP"
    },
    {
      id:"12",
      title:"MySql"
    },
];
  
export default function App() {  
return (
  
     {item.title}}
      keyExtractor={(item) => item.id}/>
  
  );
 }
   
const styles = StyleSheet.create({
  container: {
    flex:1,
      marginTop:30,
      padding:2,
    },
  item: {
    backgroundColor: 'green',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
        fontSize: 25,
  },
});

运行应用程序的步骤：使用以下命令启动服务器。

npm run android

输出：

女朋友

示例 2：在此示例中，我们创建了 FlatList，每个数据项之间都有一个分隔符。

应用程序.js

import React from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
  
const DATA = [
    {
      id:"1",
      title:"Data Structures"
    },
    {
      id:"2",
      title:"STL"
    },
    {
      id:"3",
      title:"C++"
    },
    {
      id:"4",
      title:"Java"
    },
    {
      id:"5",
      title:"Python"
    },
    {
      id:"6",
      title:"CP"
    },
    {
      id:"7",
      title:"ReactJs"
    },
    {
      id:"8",
      title:"NodeJs"
    },
    {
      id:"9",
      title:"MongoDb"
    },
    {
      id:"10",
      title:"ExpressJs"
    },
    {
      id:"11",
      title:"PHP"
    },
    {
      id:"12",
      title:"MySql"
    },
];
  
export default function App() {
  
  const Separator = () => {
    return ;
    };
    
return (
  
     {item.title}}
      keyExtractor={(item) => item.id}
      ItemSeparatorComponent={Separator}
    />
  
  );
 }
   
const styles = StyleSheet.create({
  container: {
    flex:1,
      marginTop:30,
      padding:2,
    },
  item: {
    backgroundColor: 'green',
      padding: 20,
       marginHorizontal: 16,
       marginVertical:8,
        fontSize: 25,
  },
});

说明：在这个例子中，我们创建了一个数据数组，然后我们创建了一个名为“Separator”的函数。之后，我们将该函数分配给 FlatList 组件的 ItemSeparatorComponent 属性，该属性用于在每个项目之间添加分隔符。

输出：

参考： https://reactnative.dev/docs/flatlist