概述
在 React Native 开发中，我们常常需要实现无限滚动列表，即当用户滑动到列表底部时，自动加载更多数据。在此情况下，一个非常好用的工具就是 @cutii/react-native-infinite-scroll-view。它是一个 React Native 的组件，能够帮助我们轻松实现无限滚动列表。
本文主要介绍如何使用该 npm 包，使用它实现无限滚动列表。
开始使用
在开始使用 @cutii/react-native-infinite-scroll-view 之前，必须先进行安装。在终端输入以下命令：
npm install --save @cutii/react-native-infinite-scroll-view
接着，在项目中导入该组件：
import InfiniteScrollView from '@cutii/react-native-infinite-scroll-view';
在无限滚动列表中，我们需要使用 FlatList 组件来展示列表数据。我们先编写一个简单的 FlatList 组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- -------- - ---- ---------------
----- -------- - -- ----- ----- -- -- -
----- -------- --------------- -- ---
----------------- ----------------------
-------------------------------
-------
--
----- ---- - ---------------------- ------ -- --
------ ------ ----------
------------ ------------ ----------
----
----- --- - -- -- -
------ -
---------
-----------
-------------- ----- ----- -- -- --------- ----------- ------------- ---
----------------- ------ -- -----------
--
--
--
------ ------- ----运行项目，我们就可以看到一个简单的列表。接下来我们将对该组件进行改写，使其支持无限滚动。
改写 FlatList 组件
为了实现无限滚动列表，我们需要对 FlatList 组件进行改写。改写过程如下：
- 首先，我们需要定义一些状态变量。这些变量的作用是：
data：存储已加载的数据。page：存储当前加载的页码。isEndReached：记录列表是否已滚动到底部。
代码如下：
state = {
data: [],
page: 1,
isEndReached: false,
};- 接下来，我们需要给 FlatList 组件添加以下属性：
onEndReached：该属性将在用户滚动到列表底部时调用。onEndReachedThreshold：该属性用于设置列表底部距离视窗底部的距离，当这个距离小于等于 0 时，表示滑动到底部就触发 onEndReached。
代码如下：
<FlatList
data={this.state.data}
renderItem={({ item, index }) => <ListItem item={item} index={index} />}
keyExtractor={(_, index) => `${index}`}
onEndReached={this.handleEndReached}
onEndReachedThreshold={0}
/>- 最后，我们需要实现
handleEndReached方法。该方法在用户滑动到列表底部时被调用。它的作用是检查当前是否已经加载到了最后一页，如果是，则设置this.state.isEndReached为true，否则加载下一页。
-- -------------------- ---- -------
---------------- - -- -- -
-- ------------------------- -------
--------------- ----- --------------- - - -- -- -- -
-- -------
-------------------------------------------------------------------------- -- -
-- -----------
----- ------- - --------------
--------------- ----- -------------------- ----------- ---
-- -------------- ------------ - ----
-- --------------- --- -- -
--------------- ------------- ---- ---
-
---
---
--到此为止，我们就已经成功实现了无限滚动列表。完整的代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
----- -------- - -- ----- ----- -- -- -
----- -------- --------------- -- ---
----------------- ----------------------
-------------------------------
-------
--
------ ------- ----- --- ------- --------- -
----- - -
----- ---
----- --
------------- ------
--
---------------- - -- -- -
-- ------------------------- -------
--------------- ----- --------------- - - -- -- -- -
-- -------
-------------------------------------------------------------------------- -- -
-- -----------
----- ------- - --------------
--------------- ----- -------------------- ----------- ---
-- -------------- ------------ - ----
-- --------------- --- -- -
--------------- ------------- ---- ---
-
---
---
--
-------- -
------ -
---------
----------------------
-------------- ----- ----- -- -- --------- ----------- ------------- ---
----------------- ------ -- -----------
------------------------------------
-------------------------
--
--
-
-至此，我们已经学会了如何使用 @cutii/react-native-infinite-scroll-view 实现无限滚动列表。希望这篇教程能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce481e8991b448e696b