在 React Native 开发中，列表的渲染是非常常见的需求。针对列表渲染的问题，@bang88/react-native-ultimate-listview 就应运而生，它可以帮助开发者快速搭建出高度可定制化的列表。
安装
@bang88/react-native-ultimate-listview 可以使用 npm 包管理器直接安装：
--- ------- --------------------------------------
使用步骤
1. 导入
------ ---------------- ---- -----------------------------------------
2. 配置属性
2.1. 传入数据源
----------------- ---------- ----------------- -- -------------- - ------ ---------------------- -------------------- ---- ------ ------- -- ----------- ---------------------- ---------------------------- --
实例化 UltimateListView 组件时，需要传入一些属性来配置组件的行为，其中 onFetch 就是必须的。这个属性是用来调用数据接口来获取数据的回调函数。keyExtractor 用于返回一个字符串类型的唯一 key，以便在列表渲染时进行标识，这个函数和 FlatList 中的设置方式一致。item 属性用于渲染单个列表项，可以是一个组件，也可以是一个函数：接受一个 object 参数，包含了当前列表项要显示的数据，返回一个组件即可。
2.2. 下拉刷新
----------------- -- ------------------ ------------------------- -------------------------- --------------------- -------------------------------------------- --
refreshable 表示是否启用下拉刷新功能。refreshableTitle 用于设置下拉刷新时显示的文本；onRefresh 是下拉刷新时的回调函数；dateTitle 是上次刷新时间的文本提示；refreshableProgressBackgroundColor 表示下拉刷新过程中加载进度的背景颜色。
2.3. 上拉加载更多
----------------- -- ------------------------ ----------------------------- ----------------------- ---------------- -- ------------------ --
通过设置 onEndReached 属性，可以在列表滑动到底部时自动触发加载更多。allLoadedText 用于设置全部加载完成时的文本。waitingSpinnerText 表示加载过程中的提示文本，waitingSpinnerSize 是加载过程中的提示动画大小。
2.4. 自定义头部和底部组件
----------------- -- ---------- -- ----- --------------- --- ---------------- ------------------- ---------- -- ----- --------------- --- ---------------- ------------------- --
通过 header 和 footer 属性可以分别设置头部和底部组件。这两个属性接受的都是一个返回组件的函数。
3. 数据操作
3.1. 下拉刷新
--------- - --- ---- -- -
---------------
----------- -----
---
------------- -- -
----- ---- - --
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
--
---------------
----------- ------
----- -----
---
-- ------
--在下拉刷新时，可以在 onRefresh 回调函数中重新获取数据，并通过 allLoaded 更新列表的状态。
3.2. 加载更多
---------- - --- ---- -- -
--------------- -------- ---- ---
----- -------- - --
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
-
--- ----
------ ------
-------- ---------
--
--
----- ------- - -------------------- -------------
------------- -- -
---------------
----- --------
-------- ------
---
-- ------
--在加载更多时，可以在 onLoadMore 回调函数中获取新的数据，并通过 allLoaded 属性更新列表的状态。
总结
@bang88/react-native-ultimate-listview 弥补了 React Native 中 FlatList 组件的不足，在列表渲染中提供了更多的可定制化属性，满足了各种不同的需求。当我们需要实现一个高度可定制化的列表时，这个组件将是一个好的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/136689