react-native-page-listview

對(duì)ListView/FlatList的封裝,可以很方便的分頁(yè)加載網(wǎng)絡(luò)數(shù)據(jù),還支持自定義下拉刷新View和上拉加載更多的View.兼容高版本FlatList和低版本ListVIew.組件會(huì)根據(jù)你使用的react-native的版本自動(dòng)選擇(高版本使用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

如何使用

下面說(shuō)明中的'組件'指的就是當(dāng)前這個(gè)'react-native-page-listview'組件.

首先導(dǎo)入組件

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

1.不分頁(yè),不從網(wǎng)絡(luò)獲取數(shù)據(jù)(用于本地?cái)?shù)組數(shù)據(jù)的展示)

這時(shí)你只需要給組件傳遞一個(gè)數(shù)組

let arr=[你要在ListView上展示的數(shù)據(jù)數(shù)組]

在render方法中使用該組件

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

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

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

refresh方法中指定需要展示數(shù)據(jù)的數(shù)組

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

2.不分頁(yè),從網(wǎng)絡(luò)獲取數(shù)據(jù)(用于網(wǎng)絡(luò)數(shù)組數(shù)據(jù)不多,后端接口沒(méi)有用分頁(yè)時(shí))

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

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

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

(沒(méi)有分頁(yè)的渲染效果)

3.從網(wǎng)絡(luò)獲取數(shù)據(jù)并分頁(yè),不自定義上拉刷新,下拉加載更多View(用于數(shù)據(jù)較多,需要分頁(yè)請(qǐng)求數(shù)據(jù)時(shí))

這時(shí)你需要給組件一下幾個(gè)屬性pageLen,renderRow,refresh,loadMore.

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

pageLen指定你每次調(diào)用后端分頁(yè)接口可以獲得多少條數(shù)據(jù).
renderRow使用方法和上面相同,渲染每一行的展示.
refresh方法會(huì)在你組件一開(kāi)始加載和你下拉刷新時(shí)調(diào)用,所以你在這個(gè)方法中需要將你從后端分頁(yè)接口的第一頁(yè)請(qǐng)求返回的數(shù)據(jù)通過(guò)回調(diào)傳給組件.

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

loadMore方法會(huì)在你下拉加載更多時(shí)調(diào)用,這時(shí)除了callBack還會(huì)傳給你另一個(gè)參數(shù)page表示即將要加載的分頁(yè)數(shù)據(jù)是第幾頁(yè),這時(shí)你只需要根據(jù)page把相應(yīng)第幾頁(yè)的數(shù)組數(shù)據(jù)通過(guò)回調(diào)傳給組件就行.

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

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

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

4.從網(wǎng)絡(luò)獲取數(shù)據(jù)并分頁(yè),并且自定義下拉刷新,上拉加載更多View

渲染下拉刷新View使用renderRefreshView,且此時(shí)需要給定它的高度renderRefreshViewH,渲染加載更多View使用renderLoadMore,渲染沒(méi)有更多數(shù)據(jù)的View使用renderNoMore.

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

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

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

renderNoMore=()=>{
        return(
            <View style={{}}>//你對(duì)渲染沒(méi)有更多數(shù)據(jù)時(shí)View的代碼</View>
        );
    };

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

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

拓展

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

pullState會(huì)根據(jù)你下拉的狀態(tài)給你返回相應(yīng)的字符串:

• '' : 沒(méi)有下拉動(dòng)作時(shí)的狀態(tài)
• 'pulling' : 正在下拉并且還沒(méi)有拉到指定位置時(shí)的狀態(tài)
• 'pullOk' : 正在下拉并且拉到指定位置時(shí)并且沒(méi)有松手的狀態(tài)
• 'pullRelease' : 下拉到指定位置后并且松手后的狀態(tài)

renderRefreshView=(pullState)=>{
        switch (pullState){
            case 'pullOk':
                return <View style={}>
                    //下拉刷新,下拉到指定的位置時(shí),你渲染的View
                </View>;
                break;
            case 'pullRelease':
                return <View style={}>
                    //下拉刷新,下拉到指定的位置后,并且你松手后,你渲染的View
                </View>;
                break;
            case '':
            case 'pulling':
            default:
                return <View style={}>
                    //下拉刷新,你正在下拉時(shí)還沒(méi)有拉到指定位置時(shí)(或者默認(rèn)情況下),你渲染的View
                </View>;
                break;
        }
    };

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

(有分頁(yè)自定義復(fù)雜下拉刷新View的渲染效果)

有時(shí)候我們不一定會(huì)直接渲染從后端取回來(lái)的數(shù)據(jù),需要對(duì)數(shù)據(jù)進(jìn)行一些處理,這時(shí)可以在組件中加入dealWithDataArrCallBack屬性來(lái)對(duì)數(shù)組數(shù)據(jù)進(jìn)行一些處理.下面是把從后端取回來(lái)的數(shù)組進(jìn)行順序的顛倒.

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

另外,FlatList中有個(gè)屬性為ItemSeparatorComponent是設(shè)置每一行View之間分割的View的,自己覺(jué)得不錯(cuò)就寫(xiě)到組件里了,兼容ListView.

屬性一覽表:

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

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