對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

#1.0.3->1.1.0改動/新增:

    1.增加手動處理數組數據方法,
    2.父組件重新加載數據後手動刷新數據
    3.從網絡獲取數據,數據為空時的渲染界面,
    4.解決部分手機上界面為空,不顯示的問題,(鑒於自定義組件寬高實用性並不大,而且部分手機顯示有問題,去除自定義組件寬高,改為自適應)
    5.對放在scrollView中的支持(放在ScrollView中時則不能上拉刷新,下拉加載更多)
    6.加入可選屬性allLen,對於分頁顯示時可以指定數據的總條數

安裝

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);
        });
}

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

github上加載不出來或顯示有問題,請點擊這裏: http://github.jikeclub.com/pageListView/s1.gif

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);
        });
};

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

github上加載不出來或顯示有問題,請點擊這裏: http://github.jikeclub.com/pageListView/s2.gif

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>
        );
    };

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

github上加載不出來或顯示有問題,請點擊這裏: http://github.jikeclub.com/pageListView/s3.gif

拓展

下拉刷新進階

如果你想實現更好看更絢麗的下拉刷新效果,可以像下面這樣使用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;
        }
    };

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

github上加載不出來或顯示有問題,請點擊這裏: http://github.jikeclub.com/pageListView/s4.gif

對數據數組進行處理

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

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

上面對數組的操作只會在分頁請求數據的"上拉刷新"和"下拉加載更多"時觸發.有的時候我們可能要在某個點擊事件等操作之後對數據數組進行操作,修改.這個時候就可以通過主動調用組件的changeDataArr方法來實現.這時需要先對組件進行ref引用

<PageListView 
    //其他的屬性...
    refs={(r)=>{!this.PL&&(this.PL=r)}}
/>

然後在執行某個操作時需要修改數組數據時通過主動調用changeDataArr方法來實現

this.PL1.changeDataArr((arr)=>{return arr.reverse()});

手動刷新數據

這種情況通常用於組件顯示數據分類中的某一類的情況,然後父組件中更改了篩選的分類,父組件中獲得數組數據需要手動把數據傳給組件,並刷新組件,這個時候可以用到manualRefresh這個方法,這個方法也需要先像上面一樣獲取到組件的ref引用.然後在父組件獲得數據數組res後

this.PL.manualRefresh(res);

手動刷新組件

沒有一條數據時的渲染

如果獲取到的數據數組為空,可以通過renderEmpty方法來渲染這種情況下要顯示的View

<PageListView 
    //其他的屬性...
    renderEmpty={this.renderEmpty}
/>
renderEmpty=()=>{return(<View style={[]}>你的View渲染代碼</View>);}

小功能

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

如果需要把組件放到scrollView中時加入inScrollView={true}的屬性,但此時便不能使用上拉刷新,下拉加載更多.

屬性一覽表:

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

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

react-native-page-listview使用方法