简介
react-native-flatlist-with-end 是一个 React Native 库，它可以帮助我们开发基于 FlatList 的列表，支持自定义加载更多界面，在列表末尾添加任意组件等功能。
安装
使用 npm 安装：
npm install react-native-flatlist-with-end
使用
引入组件
import FlatListWithEnd from 'react-native-flatlist-with-end';
实例化
<FlatListWithEnd data={data} renderItem={renderItem} onLoadMore={onLoadMore} />其中 data 是数据源，renderItem 是渲染列表项的函数，onLoadMore 是加载更多函数。
自定义加载更多界面
如果想要自定义加载更多界面，可以在 FlatListWithEnd 的属性中设置 loadMoreRenderItem。
<FlatListWithEnd
data={data}
renderItem={renderItem}
onLoadMore={onLoadMore}
loadMoreRenderItem={() => <View><Text>Loading...</Text></View>}
/>在列表末尾添加任意组件
如果想要在列表末尾添加任意组件，可以在 FlatListWithEnd 的属性中设置 ListFooterComponent。
<FlatListWithEnd
data={data}
renderItem={renderItem}
onLoadMore={onLoadMore}
ListFooterComponent={() => <View><Text>End</Text></View>}
/>示例代码
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
------ --------------- ---- ---------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------------ -- -
-- ------
------------- -- -
---------- ---- ---- ----- ------ -- - ---- ---- ----- ------ -- - ---- ---- ----- ------ ----
-- ------
-- ----
----- ---------- - -- ---- -- -- -
----- -------- -------- -- ---
------------------------
-------
--
----- ---------- - ----- -- -- -
-- --------
------ --- --------------- -- -
------------- -- -
----------------- - ---- ----------------- ----- ----- --------------- ----
----------
-- ------
---
--
------ -
----------------
-----------
-----------------------
-----------------------
---------------------- -- ----- -------- ----------- --------- -------- -- -------- -------- ----------- ------ ---------- ----------------------
----------------------- -- ----- -------- -------- --- ---------------- ------ -------- -------- ---------- -------- ------ ------------------
--
--
--
------ ------- ----小结
react-native-flatlist-with-end 为我们在 React Native 开发中实现列表功能提供了很方便的方法，可实现自定义加载更多界面和列表末尾添加任意组件的功能。使用该库，我们可以更方便地开发出用户友好的列表页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726781e8991b448e8998