react-native-ultimate-listview

UltimateListView

UltimateListView是一个基于FlatList的列表视图。

添加

yarn add react-native-ultimate-listview@latest

import {UltimateListView} from 'react-native-ultimate-listview'

API说明

<UltimateListView
    ref={ref => 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={'正在刷新...'}
正在刷新的过程中，显示的文字