在 React Native 开发中，列表的渲染是非常常见的需求。针对列表渲染的问题，@bang88/react-native-ultimate-listview 就应运而生，它可以帮助开发者快速搭建出高度可定制化的列表。
安装
@bang88/react-native-ultimate-listview 可以使用 npm 包管理器直接安装：
npm install @bang88/react-native-ultimate-listview
使用步骤
1. 导入
import UltimateListView from '@bang88/react-native-ultimate-listview';
2. 配置属性
2.1. 传入数据源
<UltimateListView
ref={(ref: UltimateListView) => {this.listView = ref;}}
onFetch={this.onFetch}
keyExtractor={(item: any, index: number) => `${index}`}
item={this.renderItem}
refreshableMode={'advanced'}
/>实例化 UltimateListView 组件时，需要传入一些属性来配置组件的行为，其中 onFetch 就是必须的。这个属性是用来调用数据接口来获取数据的回调函数。keyExtractor 用于返回一个字符串类型的唯一 key，以便在列表渲染时进行标识，这个函数和 FlatList 中的设置方式一致。item 属性用于渲染单个列表项，可以是一个组件，也可以是一个函数：接受一个 object 参数，包含了当前列表项要显示的数据，返回一个组件即可。
2.2. 下拉刷新
<UltimateListView
……
refreshable={true}
refreshableTitle={'下拉刷新'}
onRefresh={this.onRefresh}
dateTitle={'上次刷新时间：'}
refreshableProgressBackgroundColor="#FFB6C1"
/>refreshable 表示是否启用下拉刷新功能。refreshableTitle 用于设置下拉刷新时显示的文本；onRefresh 是下拉刷新时的回调函数；dateTitle 是上次刷新时间的文本提示；refreshableProgressBackgroundColor 表示下拉刷新过程中加载进度的背景颜色。
2.3. 上拉加载更多
<UltimateListView
……
allLoadedText={'全部加载完成'}
waitingSpinnerText={'加载中...'}
waitingSpinnerSize={20}
onEndReached={() => this.onLoadMore()}
/>通过设置 onEndReached 属性，可以在列表滑动到底部时自动触发加载更多。allLoadedText 用于设置全部加载完成时的文本。waitingSpinnerText 表示加载过程中的提示文本，waitingSpinnerSize 是加载过程中的提示动画大小。
2.4. 自定义头部和底部组件
<UltimateListView
……
header={() => <View style={{height: 20, backgroundColor: 'yellow'}}></View>}
footer={() => <View style={{height: 20, backgroundColor: 'orange'}}></View>}
/>通过 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