在 React Native 中，我们经常需要使用列表来展示数据。而 FlatList 是 React Native 中最常用的列表组件之一，它能够高效地渲染大量数据，并且支持很多常见的列表特性，比如下拉刷新和上拉加载更多。
在本文中，我们将探讨如何使用 FlatList 实现无限滚动效果。通过这种方式，我们可以让列表在用户滚动到底部时自动加载更多数据，从而提升用户体验。
实现思路
要实现无限滚动效果，我们需要在 FlatList 中监听用户的滚动事件，并在用户滚动到底部时触发加载更多数据的操作。具体来说，我们可以通过以下几个步骤来实现：
- 在 FlatList 中添加 onEndReached 属性，用于监听用户滚动到列表底部的事件。
- 在 onEndReached 事件回调函数中触发加载更多数据的操作。
- 在加载更多数据的过程中，禁用 onEndReached 属性，避免在加载数据的同时触发多次事件。
- 在加载完数据后，重新启用 onEndReached 属性，并更新 FlatList 中的数据源。
下面我们将逐步实现以上步骤。
实现步骤
步骤一：添加 onEndReached 属性
首先，我们需要在 FlatList 中添加 onEndReached 属性，用于监听用户滚动到列表底部的事件。具体来说，我们可以在 FlatList 的 props 中添加以下代码：
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.1}
/>其中，onEndReached 属性表示用户滚动到列表底部时触发的事件回调函数，handleLoadMore 表示我们需要自定义的加载更多数据的操作。onEndReachedThreshold 属性表示用户滚动到列表底部距离底部多少距离时触发 onEndReached 事件，默认值为 0.1。
步骤二：触发加载更多数据的操作
接下来，我们需要在 handleLoadMore 函数中触发加载更多数据的操作。具体来说，我们可以在这个函数中调用一个异步函数，从服务器端获取更多的数据，并将这些数据追加到 FlatList 的数据源中。
-- -------------------- ---- -------
----- -------------- - ----- -- -- -
-- ------------ -
-------------------
--- -
----- ------- - ----- -------------- - ---
------------ - ---
----------------- -------------
- ----- ------- -
---------------------
- ------- -
--------------------
-
-
--在这段代码中，isLoading 表示当前是否正在加载数据，如果正在加载数据，则不再触发加载更多数据的操作。fetchData 函数表示我们需要自定义的从服务器端获取数据的操作，page 表示当前加载的页面数，data 表示 FlatList 的数据源。
在加载数据的过程中，我们需要禁用 onEndReached 属性，避免在加载数据的同时触发多次事件。我们可以在 setIsLoading 函数中设置 onEndReached 属性为 null，然后在 setIsLoading(false) 后再重新设置回来。
-- -------------------- ---- -------
----- -------------- - ----- -- -- -
-- ------------ -
-------------------
----- ------------ - ---------------------------------------
-------------------------------------- - -----
--- -
----- ------- - ----- -------------- - ---
------------ - ---
----------------- -------------
- ----- ------- -
---------------------
- ------- -
-------------------------------------- - -------------
--------------------
-
-
--其中，flatListRef 表示 FlatList 的引用，我们可以在组件中使用 useRef 创建它。这样，我们就可以通过 flatListRef.current.props.onEndReached 来获取和设置 onEndReached 属性了。
-- -------------------- ---- ------- ----- ----------- - ------------- --------- ----------------- ----------- ----------------------- --------------------------- ----------------------------- --------------------------- --
步骤三：更新数据源
在加载完数据后，我们需要重新启用 onEndReached 属性，并更新 FlatList 中的数据源。具体来说，我们可以在 setData 函数的回调函数中重新设置 onEndReached 属性。
setData([...data, ...newData], () => {
flatListRef.current.props.onEndReached = onEndReached;
});这样，我们就完成了无限滚动效果的实现。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - --------- ------ - ---- --------
------ - --------- ----- ---- - ---- ---------------
----- --------- - ----- ------ -- -
----- -------- - ----- ----------------------------------------------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- ---------- - -- ---- -- -- -
------ -
----- -------- -------- -- ---
-------------------------
------------------------
-------
--
--
----- ------------ - ------ -- -------------------
----- -------------- - -- -- -
----- ------ -------- - -------------
----- ------ -------- - ------------
----- ----------- ------------- - ----------------
----- ----------- - -------------
----- -------------- - ----- -- -- -
-- ------------ -
-------------------
----- ------------ - ---------------------------------------
-------------------------------------- - -----
--- -
----- ------- - ----- -------------- - ---
------------ - ---
----------------- -------------
- ----- ------- -
---------------------
- ------- -
----------------- ------------ -- -- -
-------------------------------------- - -------------
---
--------------------
-
-
--
------ -
---------
-----------------
-----------
-----------------------
---------------------------
-----------------------------
---------------------------
--
--
--
------ ------- ---------------总结
通过本文的介绍，我们了解了如何使用 FlatList 实现无限滚动效果。这种技术可以提升用户体验，让用户在滚动列表时无需手动触发加载更多数据的操作。如果你在 React Native 中需要使用列表展示数据，不妨尝试使用 FlatList 并实现无限滚动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65729f8ed2f5e1655db8c270