React Native 是 Facebook 推出的用于构建原生移动应用的框架，它允许开发者使用 React 语法去开发 Android 和 iOS 应用。在 React Native 中，列表组件是很常见的 UI 组件，它们允许我们展示一组数据，同时也可以增加用户交互性。本文将详细介绍 React Native 中的列表组件，并提供示例代码和指导意义。
FlatList 组件
最常见的 React Native 列表组件是 FlatList。FlatList 是一个高性能的列表组件，它能够处理大量数据且具有无限滚动的功能。FlatList 是基于 VirtualizedList 实现的，可以高效地渲染大量数据，并记录列表的滚动位置。
基本使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- ----- ---- - ---- ---------------
----- --------------- ------- --------- -
----- - -
----- -
- ---- ---- ----- ------ --
- ---- ---- ----- ------- --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
-- ---
-
--
---------- - -- ---- -- -- -
------ -
----- -------- -------- -- ---
------------------------
-------
--
--
-------- -
------ -
---------
----------------------
----------------------------
--
--
-
-
------ ------- ----------------上面的代码展示了 FlatList 组件的基本使用，我们设置数据源 data 和 渲染方法 renderItem，然后就可以在页面上展示数据了。
无限滚动
FlatList 组件经常被用于展示大量数据，但大量数据的展示也可能会影响性能。这时我们可以使用 FlatList 的无限滚动功能来提高性能。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- ----- ---- - ---- ---------------
----- -------------- ------- --------- -
----- - -
----- -
- ---- ---- ----- ------ --
- ---- ---- ----- ------- --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
-- ---
--
----- -
--
--------------- - -- -- -
------ ----- -------- ------- -- ---------------- ------- -- ---
--
-------------- - -- -- -
--------------
-
----- --------------- - -
--
-- -- -
-----------------
-
--
--
--------- - -- -- -
-- ----- ---- ----
--
---------- - -- ---- -- -- -
------ -
----- -------- -------- -- ---
------------------------
-------
--
--
-------- -
------ -
---------
----------------------
----------------------------
---------------------------------------------
----------------------------------
---------------------------
--
--
-
-
------ ------- ---------------上面的代码展示了如何在 FlatList 中实现无限滚动。我们通过设置 onEndReached 和 onEndReachedThreshold 来实现无限滚动的效果。
SectionList 组件
SectionList 是另一种高性能的列表组件，它允许我们将列表数据分组展示。SectionList 组件的性能跟 FlatList 相似，都能处理大量数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----- ---- - ---- ---------------
----- ------------------ ------- --------- -
----- - -
----- -
-
------ ------ ---
----- -
- ---- ---- ----- ------ --
- ---- ---- ----- ------- --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
- ---- ---- ----- ------ --
-- ---
-
--
-
------ ------ ---
----- -
- ---- ---- ----- ----- --
- ---- ---- ----- ------ --
- ---- ---- ----- ------- --
- ---- ---- ----- ----- --
-- ---
-
--
-- ---
-
--
---------- - -- ---- -- -- -
------ -
----- -------- -------- -- ---
------------------------
-------
--
--
------------------- - -- ------- -- -- -
------ -
----- -------- ---------------- ------ ---
----------------------------
-------
--
--
-------- -
------ -
------------
--------------------------
----------------------------
----------------------------------------------
--
--
-
-
------ ------- -------------------上面的代码展示了 SectionList 组件的基本使用。我们通过设置 sections 和 渲染方法来展示一组数据。
结语
本文详细介绍了 React Native 中的列表组件 FlatList 和 SectionList，并提供了示例代码和指导意义。希望本文能够帮助到正在学习 React Native 或者想要开发移动应用的开发者们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782830c935627c9000f21c2
