UltimateListView
UltimateListView是一个基于FlatList的列表视图。
添加
yarn add react-native-ultimate-listview@latest
import {UltimateListView} from 'react-native-ultimate-listview'
API说明
this.listView = ref}
header={this._header.bind(this)}
onFetch={this.fetchData.bind(this)}
keyExtractor={(item, index) => `${index} - ${item}`}
refreshable={true}
allLoadedText={'没有更多数据了'}
waitingSpinnerText={'加载中...'}
item={this.renderItem.bind(this)}
pagination={false}
separator={this._space.bind(this)}
/>
1. ref
ref={ref => this.listView = ref}
将当前本控件的引用设置为this的listView
2. header
header={this._header.bind(this)}
这是列表视图的标题，它始终显示在列表的顶部
3. item
item={this.renderItem.bind(this)}
这是列表视图的行内容，将逐行呈现
4. separator
separator={this._space.bind(this)}
可以将其设置为true以使用默认样式显示分隔符，或者设置为false以隐藏分隔符。而且，你可以通过传递自己的View Component来自定义它。
5. refreshable
refreshable={true}
将其设置为true，以启用刷新组件
6. pagination
pagination={false}
如果你不想使用分页功能，请将其设置为false
7. allLoadedText
allLoadedText={'没有更多数据了'}
分页数据全部加载完毕后显示的文字
8. waitingSpinnerText
waitingSpinnerText={'加载中...'}
如果autoPagination设置为true，分页加载时的等待文字
9. onFetch(page,startFetch,abortFetch)
onFetch={this.fetchData.bind(this)}
fetchData = (page, startFetch, abortFetch) => {
getToday().then((list) => {
let category = list.category;
let dataSource = [];
category.map((value, i) => {
dataSource[i] = list.results[category[i]][list.results[category[i]].length - 1];
});
startFetch(dataSource, category.length);
}).catch(() => {
abortFetch();
});
};
你应该为每个服务器请求调用startFetch(rowData,pageLimit),如果网络请求遇到错误，比如没有网络连接或请求超时，则调用abortFetch。
10. keyExtractor
(item:object,index:number) => string
keyExtractor={(item, index) => `${index} - ${item}`}
此函数用于为给定的item生成一个不重复的key,key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则弄人抽取item.key作为key的值。若item.key也不存在，则使用数组下标。
11. refreshableTitlePull
refreshableTitlePull={'下拉刷新...'}
在下拉的过程中显示的文字
12. refreshableTitleRelease
refreshableTitleRelease={'释放刷新'}
在下拉到底的时候，显示的文字
13. refreshableTitleRefreshing
refreshableTitleRefreshing={'正在刷新...'}
正在刷新的过程中，显示的文字