React 原生 FlatList 组件

在本文中，我们将了解如何在 react-native 中创建 FlatList。为此，我们将使用 FlatList 组件。它用于在可滚动列表视图中呈现项目。

句法：

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 中的方法：

flashScrollIndicators()：它会暂时显示滚动指示器。
getNativeScrollRef()：它提供对底层滚动组件的引用。
getScrollResponder()：它提供底层滚动响应器的句柄。
getScrollableNode()：它提供底层滚动节点的句柄。
recordInteraction()：它告诉列表已经发生的交互。
scrollToEnd()：滚动到内容的末尾。
scrollToIndex()：滚动到提供了索引的特定项目。
scrollToItem()：滚动到提供的项目。它需要对数据进行线性扫描。
scrollToOffset()：它滚动到列表中的特定内容像素偏移量。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init myapp
```
第 3 步：现在进入您的项目文件夹，即 myapp
```
cd myapp
```

项目结构：

示例：现在让我们实现 FlatList。在这里，我们创建了一个 FlatList 课程。

App.js

import React  from 'react';
import{ StyleSheet,
        Text,
        View,
        FlatList,
      } 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"
  },
];
  
const Item = ({title}) => {
  return( 
    
      {title}
    
  );
}
  
export default function App() {
    
  
const renderItem = ({item})=>( 
  
);
return (
  
     item.id}
    />
  
  );
}
  
const styles = StyleSheet.create({
  container: {
    marginTop:30,
    padding:2,
  },
  item: {
    backgroundColor: '#f5f520',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

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