react-native-page-listview使用方法

標籤：rom   載入更多   als   github   code   ase   技術分享   自訂   好的   

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

#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}的屬性,但此時便不能使用上拉重新整理,下拉載入更多.

屬性一覽表:

props	作用	預設值
renderRow	處理"渲染FlatList/ListView的每一行"的方法	null
refresh	處理"下拉重新整理"或"一開始載入資料"的方法	null
loadMore	處理"載入更多"的方法	null
pageLen	每個分頁的資料數	0
allLen	總的資料條數	0
dealWithDataArrCallBack	如果需要在用當前後端返回的數組資料進行處理的話,傳入回呼函數	null
renderLoadMore	還有資料可以從後端取得時候渲染底部View的方法	null
renderNoMore	沒有資料(資料已經從後端全部載入完)是渲染底部View的方法	null
renderRefreshView	渲染下拉重新整理的View樣式	null
renderRefreshViewH	渲染下拉重新整理的View樣式的高度	60
renderEmpty	如果網路擷取資料為空白時的渲染介面	null
ItemSeparatorComponent	渲染每行View之間的分割線View	null
inScrollView	當前組件是否是放在scrollView中(放在ScrollView中時則不能上拉重新整理,下拉載入更多)	false
FlatList/ListView自身的屬性	是基於FlatList/ListView,所以可以直接使用他們自身的屬性

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

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

react-native-page-listview使用方法