React Native 中的 FlatList 组件是一个高效的滚动列表组件，适用于大量数据的展示。它可以自动维护一个视图池来减少内存的使用，支持下拉刷新和无限滚动等特性。本文将介绍如何在 React Native 中使用 FlatList 组件。
安装和导入 FlatList 组件
在使用 FlatList 组件之前，需要先安装和导入它。
安装 FlatList 组件
可以使用 npm 或 yarn 来安装 FlatList 组件，命令如下：
npm install --save react-native
或
yarn add react-native
导入 FlatList 组件
在需要使用 FlatList 的文件中，可以通过以下方式导入 FlatList 组件：
import { FlatList } from 'react-native';FlatList 组件的 Props
在使用 FlatList 组件时，需要传递一些 Props 来控制它的行为。下面是 FlatList 组件的一些常用 Props：
data: Array，表示要渲染的数据源。它应该是一个数组，每个元素可以是任何类型的数据。renderItem: Function，表示渲染每个列表项的函数。它接收一个参数，即当前列表项的数据，返回一个 React 组件来展示该数据。keyExtractor: Function，表示用于提取每个列表项的唯一 key 值的函数。numColumns: number，表示列数。如果设置为大于 1 的数值，FlatList 会根据列数将数据源分成多列展示。onRefresh: Function，表示下拉刷新时的回调函数。onEndReached: Function，表示到达列表底部时的回调函数。
使用 FlatList 组件
基本用法
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- -
- ---- ---- ------ ------- --
- ---- ---- ------ -------- --
- ---- ---- ------ -------- --
--
--
-
---------- - -- ----- ----- -- -- -
------ -
------
-----------------------
-------------------------
-------
--
--
-------- -
----- - ---- - - -----------
------ -
---------
-----------
----------------------------
-------------------- ------ -- ---------
--
--
-
-上面的代码中，定义了一个 FlatList 组件，数据源是一个数组，每个元素是一个对象。renderItem 函数渲染每个列表项，返回一个包含两个 Text 组件的 View 组件。
下拉刷新
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- --------- -------------- - ---- ---------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- -
- ---- ---- ------ ------- --
- ---- ---- ------ -------- --
- ---- ---- ------ -------- --
--
----------- ------
--
-
---------- - -- ----- ----- -- -- -
------ -
------
-----------------------
-------------------------
-------
--
--
--------- - -- -- -
--------------- ----------- ---- ---
-- ----
------------- -- -
----- ------- - -
- ---- ---- ------ -------- --
- ---- ---- ------ ------------ --
- ---- ---- ------ ----- --
--
--------------- ----- -------- ----------- ----- ---
-- ------
--
-------- -
----- - ----- ---------- - - -----------
------ -
---------
-----------
----------------------------
-------------------- ------ -- ---------
----------------
--------------- ----------------------- -------------------------- --
-
--
--
-
-上面的代码中，FlatList 组件增加了一个 refreshControl 属性，用来控制下拉刷新功能。onRefresh 方法在下拉刷新时被调用，可以在里面进行数据请求。在数据请求结束后，将 refreshing 设置为 false，表示下拉刷新完成。
无限滚动
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- -
- ---- ---- ------ ------- --
- ---- ---- ------ -------- --
- ---- ---- ------ -------- --
--
-------- ------
--
--------- - --
------------- - ---
-
---------- - -- ----- ----- -- -- -
------ -
------
-----------------------
-------------------------
-------
--
--
------------ - -- -- -
-- --------------------- -
--------------- -------- ---- ---
-- --------
------------- -- -
----- ------- - -----------
- ------- ------------- --
--- ------ -- --
---- --------------------------
------ ----------------------------
--
--
------------------------- -- --
----- -------------------------------
-------- ------
----
------------
-- ------
-
--
-------- -
----- - ----- ------- - - -----------
------ -
---------
-----------
----------------------------
-------------------- ------ -- ---------
---------------------------
--------------------------------
---------------------
------- -- ------------------ ------------ --------------- --
-
--
--
-
-上面的代码中，FlatList 组件增加了 onEndReachedThreshold 和 onEndReached 属性，分别表示到达列表底部的阈值和到达列表底部时触发的回调函数。在 onEndReached 回调函数中，可以进行加载更多数据的操作。在请求过程中，将 loading 设置为 true，并在列表底部显示一个加载中的提示组件。请求结束后，将新数据添加到原数据的末尾，并将 loading 重置为 false。
总结
FlatList 组件是一个非常方便的滚动列表组件，可以支持大量数据的展示。在使用 FlatList 组件时，需要注意传递一些 Props 来控制它的行为，例如数据源、渲染每个列表项的函数、提取每个列表项唯一 key 值的函数等。如果想要实现下拉刷新和无限滚动等特性，还需要使用相应的 Props 和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ebfdd5f6b2d6eab36494b7