react-native-page-listview使用方法(自定義FlatList/ListView下拉刷新,上拉加載更多,方便的實現分頁)...

react-native-page-listview

對ListView/FlatList的封裝,可以很方便的分頁加載網絡數據,還支持自定義下拉刷新View和上拉加載更多的View.兼容高版本FlatList和低版本ListVIew.組件會根據你使用的react-native的版本自動選擇(高版本使用FlatList,低版本使用ListView)

github地址: https://github.com/geek-prince/react-native-page-listview

npm地址: https://www.npmjs.com/package/react-native-page-listview

安裝

npm install react-native-page-listview --save

如何使用

下面說明中的'組件'指的就是當前這個'react-native-page-listview'組件.

首先導入組件

import PageListView from 'react-native-page-listview';

1.不分頁,不從網絡獲取數據(用於本地數組數據的展示)

這時你只需要給組件傳遞一個數組

let arr=[你要在ListView上展示的數據數組]

在render方法中使用該組件

<PageListView 
    renderRow={this.renderRow} 
    refresh={this.refresh} 
/>

renderRow方法中需要你指定每一行數據的展示View,與ListView/FlatList的renderRow/renderItem方法相同

renderRow(rowData,index){
    return(<View>你的View展示</View>);
}

refresh方法中指定需要展示數據的數組

refresh=(callBack)=>{
    callBack(arr);
}

2.不分頁,從網絡獲取數據(用於網絡數組數據不多,後端接口沒有用分頁時)

這時與上面使用方法一致,只需要更改一下refresh方法

refresh=(callBack)=>{
    fetch(url)
        .then((response)=>response.json())
        .then((responseData)=>{
            //根據接口返回結果得到數據數組
            let arr=responseData.result;
            callBack(arr);
        });
}

以上這兩種方式渲染結果如下(沒有下拉刷新和上拉更多):

(沒有分頁的渲染效果)

3.從網絡獲取數據並分頁,不自定義上拉刷新,下拉加載更多View(用於數據較多,需要分頁請求數據時)

這時你需要給組件一下幾個屬性pageLen,renderRow,refresh,loadMore.

<PageListView 
    pageLen={15} 
    renderRow={this.renderRow} 
    refresh={this.refresh} 
    loadMore={this.loadMore} 
/>

pageLen指定你每次調用後端分頁接口可以獲得多少條數據.
renderRow使用方法和上面相同,渲染每一行的展示.
refresh方法會在你組件一開始加載和你下拉刷新時調用,所以你在這個方法中需要將你從後端分頁接口的第一頁請求返回的數據通過回調傳給組件.

refresh=(callBack)=>{
    fetch(分頁接口url+'?page=1')
        .then((response)=>response.json())
        .then((responseData)=>{
            //根據接口返回結果得到數據數組
            let arr=responseData.result;
            callBack(arr);
        });
}

loadMore方法會在你下拉加載更多時調用,這時除了callBack還會傳給你另一個參數page表示即將要加載的分頁數據是第幾頁,這時你只需要根據page把相應第幾頁的數組數據通過回調傳給組件就行.

loadMore=(page,callback)=>{
    fetch(分頁接口url+'?page='+page)
        .then((response)=>response.json())
        .then((responseData)=>{
            //根據接口返回結果得到數據數組
            let arr=responseData.result;
            callBack(arr);
        });
};

這種情況下顯示的渲染效果爲:

(有分頁不自定義View的渲染效果)

4.從網絡獲取數據並分頁,並且自定義下拉刷新,上拉加載更多View

渲染下拉刷新View使用renderRefreshView,且此時需要給定它的高度renderRefreshViewH,渲染加載更多View使用renderLoadMore,渲染沒有更多數據的View使用renderNoMore.

<PageListView 
    pageLen={15} 
    renderRow={this.renderRow} 
    refresh={this.refresh} 
    loadMore={this.loadMore} 
    //上面四個屬性使用方法同上
    renderRefreshView={this.renderRefreshView}
    renderRefreshViewH={150}
    renderLoadMore={this.renderLoadMore}
    renderNoMore={this.renderNoMore}
/>

renderRefreshView=()=>{
        return(
            <View style={{}}>//你對渲染下拉刷新View的代碼</View>
        );
    };

renderLoadMore=()=>{
        return(
            <View style={{}}>//你對渲染加載更多View的代碼</View>
        );
    };

renderNoMore=()=>{
        return(
            <View style={{}}>//你對渲染沒有更多數據時View的代碼</View>
        );
    };

這種情況下顯示的渲染效果爲:

(有分頁自定義View的渲染效果)

拓展

如果你想實現更好看更絢麗的下拉刷新效果,可以像下面這樣使用renderRefreshView.

pullState會根據你下拉的狀態給你返回相應的字符串:

• '' : 沒有下拉動作時的狀態
• 'pulling' : 正在下拉並且還沒有拉到指定位置時的狀態
• 'pullOk' : 正在下拉並且拉到指定位置時並且沒有鬆手的狀態
• 'pullRelease' : 下拉到指定位置後並且鬆手後的狀態

renderRefreshView=(pullState)=>{
        switch (pullState){
            case 'pullOk':
                return <View style={}>
                    //下拉刷新,下拉到指定的位置時,你渲染的View
                </View>;
                break;
            case 'pullRelease':
                return <View style={}>
                    //下拉刷新,下拉到指定的位置後,並且你鬆手後,你渲染的View
                </View>;
                break;
            case '':
            case 'pulling':
            default:
                return <View style={}>
                    //下拉刷新,你正在下拉時還沒有拉到指定位置時(或者默認情況下),你渲染的View
                </View>;
                break;
        }
    };

這種情況下顯示的渲染效果爲:

(有分頁自定義複雜下拉刷新View的渲染效果)

有時候我們不一定會直接渲染從後端取回來的數據,需要對數據進行一些處理,這時可以在組件中加入dealWithDataArrCallBack屬性來對數組數據進行一些處理.下面是把從後端取回來的數組進行順序的顛倒.

<PageListView 
    //其他的屬性...
    dealWithDataArrCallBack={(arr)=>{return arr.reverse()}}
/>

另外,FlatList中有個屬性爲ItemSeparatorComponent是設置每一行View之間分割的View的,自己覺得不錯就寫到組件裏了,兼容ListView.

屬性一覽表:

props	作用
renderRow	處理"渲染FlatList/ListView的每一行"的方法
refresh	處理"下拉刷新"或"一開始加載數據"的方法
loadMore	處理"加載更多"的方法
pageLen	每個分頁的數據數
dealWithDataArrCallBack	如果需要在用當前後端返回的數組數據進行處理的話,傳入回調函數
renderLoadMore	還有數據可以從後端取得時候渲染底部View的方法
renderNoMore	沒有數據(數據已經從後端全部加載完)是渲染底部View的方法
renderRefreshView	渲染下拉刷新的View樣式
renderRefreshViewH	渲染下拉刷新的View樣式的高度
ItemSeparatorComponent	渲染每行View之間的分割線View
height	指定組件寬高,不指定時組件flex:1自適應寬高
width	指定組件寬高,不指定時組件flex:1自適應寬高
FlatList/ListView自身的屬性	是基於FlatList/ListView,所以可以直接使用他們自身的屬性

注意:如果屏幕下方有絕對定位的View時,這時組件自適應寬高,下面的一部分內容會被遮擋,這時一個很好的解決方法是在組件下方渲染一個與絕對定位等高的透明View來解決(<View style={{height:你絕對定位View的高度,backgroundColor:'#0000'}}/>).

如果大家覺得我的組件好用的話,幫到你的話,歡迎大家Star,Fork,如果有什麼問題的話也可以在github中想我提出,謝謝大家的支持.