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