FlatList 是 React Native 中一个高性能的滚动列表组件。它可以显示大量的数据，并且非常易于使用。在这篇文章中，我们将深入探讨如何使用 FlatList 组件，以及在其中显示数据。
FlatList 组件的基础知识
FlatList 可以通过一个数组来展示一个列表，并且可以通过几个属性来控制列表的渲染方式。下面是一些 FlatList 常用的属性：
data: 展示的数据数组renderItem: 定义每一项数据的组件keyExtractor: 定义每一项数据的 key
使用 FlatList 组件
首先，我们需要准备一些数据来展示在列表中。我们以一个简单的数组为例：
const data = [
{ name: '张三', age: 25 },
{ name: '李四', age: 26 },
{ name: '王五', age: 27 },
];接下来，我们需要创建一个 FlatList 组件，并将数据传递给它：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ----- ---- - ---- ---------------
----- --- - -- -- -
------ -
---------
-----------
-------------- ---- -- -- -
------ -
----- -------- -------- -- ---
------------------------
-----------------------
-------
--
--
-------------------- -- ----------
--
--
--
------ ------- ----在上述代码中，我们使用了 data 数组作为 FlatList 的数据源。我们同时定义了一个 renderItem 函数，它将在列表中每一项的数据被渲染时被触发。在这个函数中，我们将每一项数据渲染为一个视图，这个视图包含了姓名和年龄信息。我们还定义了 keyExtractor 函数，用于为每一项数据定义一个唯一的 key（在这里，我们使用了每个人的姓名）。
FlatList 组件的高级用法
除了上述基本用法， FlatList 还有一些高级用法，能够让你更好地控制列表的呈现方式。
1. 控制列表的滚动方向
FlatList 可以根据 horizontal 属性来设置列表的滚动方向。如果设置为 true，则列表将水平滚动。
<FlatList
data={data}
renderItem={...}
keyExtractor={...}
horizontal={true}
/>2. 控制列表项的间隔
FlatList 可以根据 ItemSeparatorComponent 属性来设置列表项之间的间隔。你可以定义一个组件作为间隔，并将它传递给这个属性。
<FlatList
data={data}
renderItem={...}
keyExtractor={...}
ItemSeparatorComponent={() => {
return <View style={{ height: 10 }} />;
}}
/>3. 控制列表的刷新方式
FlatList 可以根据 refreshing 属性来控制列表的刷新方式。如果设置为 true，则列表将在刷新中。
-- -------------------- ---- -------
---------
-----------
----------------
------------------
------------- -- -
-- ------------
--
----------------------
--4. 控制列表的排序方式
FlatList 可以根据 sorted 和 onEndReachedThreshold 属性来控制列表的排序方式。如果设置了 sorted 为 true，则列表将按照指定的排序方式呈现。
-- -------------------- ---- -------
---------
-----------------
----------------
------------------
-------------
---------------------------
---------------- -- -
-- -------------
--
--总结
FlatList 组件是一个非常强大且易于使用的组件。我们可以通过设置一些属性来控制列表的渲染方式，或者使用高级用法来获取更多的控制力。希望这篇文章能够帮助你更好地理解 FlatList 组件，并在实际项目中它使用起来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649113b248841e9894f17bee