下拉刷新的工具我用的是：react-native-pullrefresh-scrollview王财，上拉加載更多沒找到棉安，所以自己動手做了一個苏章，其實這個上拉加載更多不難攻晒，大概的思路就是將ListView的數據最后添加空數據顾复，在renderRow中判斷是否最后一行，然后返回ActivityIndicator組件鲁捏。當然這只是大概思路芯砸，具體還要做一些細節(jié)判斷防止諸如內容高度比容器高度小的時候觸發(fā)加載更多等問題。下面我講解一下我的做法给梅。
- 首先創(chuàng)建數據加載函數
_getRecord(type, refresh) {
if (type == 1) { // 判斷 1 為下拉刷新啊假丧，2為上啦加載更多
this.page = 1;
if (refresh == null) {
}
}
else {
if (this.state.isLoadingMore == true) {
return;
}
this.page ++;
this.setState({isLoadingMore: true});
}
var body = null;
// 處理傳入參數，插入page頁面
if (this.networkParams[1].indexOf("@") != -1) {
var bodyArr = this.networkParams[1].split("@");
var body = bodyArr[0]+this.page+bodyArr[1];
}
setTimeout(function () { // 測試專用动羽，延時3秒
fetch(this.networkParams[0]+body)
.then((response) => response.json())
.then((responseJson) => {
if (refresh != undefined && refresh != null) {
// 這里很奇怪包帚，我在自己的項目里面的類只里正常，下拉刷新解鎖正常运吓，但是這里說什么refresh undefined渴邦，什么鬼。
// refresh.onRefreshEnd();
}
else {
}
if (type == 2) {
this.setState({isLoadingMore: false});
}
if (Public._notNullOrUndefined(responseJson)) {
if (responseJson.tracks.length > 0) {
if (type == 1) {
var temp = responseJson.tracks;
temp.push(""); // push一個空值
this.setState({theNetworkData: temp});
}
else {
var temp = this.state.theNetworkData;
temp.pop();
temp = temp.concat(responseJson.tracks);
temp.push("");
this.setState({theNetworkData: temp});
}
// 判斷是否已經到盡頭拘哨，是的話谋梭，上拉將不再觸發(fā)數據加載任務
if (responseJson.tracks.length < this.defaultPageItem) {
this.canLoadMore = false;
}
else {
this.canLoadMore = true;
}
}
}
else {
this.page --;
}
})
.catch((error) => {
// this.page --;
// if (refresh != null) {
// refresh.onRefreshEnd();
// }
// else {
// Public.hideHUD();
// }
// if (type == 2) {
// this.setState({isLoadingMore: false});
// }
});
}.bind(this), 3000);
- _onRefresh，_onEndReached倦青，renderRow
_onRefresh(refresh) { // 下拉刷新觸發(fā)
this._getRecord(1, refresh);
}
_onEndReached(event) { // 上啦加載觸發(fā)
// 只要用于防止在內容高度低于容器高度的時候出發(fā)加載數據函數
if (this.tbvOffsetY > 5 && this.canLoadMore == true) {
this._getRecord(2,null);
}
}
_renderRow(rowData, sectionId, rowId) {
if (rowId == this.state.theNetworkData.length - 1) { // 判斷最后一行
return (<ActivityIndicator style={{height: 50}} animating={this.state.isLoadingMore} color="black" />);
}
return this.renderRowCallback(rowData, sectionId, rowId);
}
4.調用(上面是封裝的CustomListView控件)
<TestListView tbvHeight={Public.kHeight-64-3}
ref={(e)=>this.tbv = e}
defaultPageItem={4} // 設置一個值瓮床，通常是和請求url設置的每一頁n條數據的n一致，用來判斷是否已經是加載的最后一頁产镐，若是纤垂，則以后不再觸發(fā)上啦加載更多函數，直到下拉刷新磷账。
renderRowCallback={(rowData, sectionId, rowId)=>this._renderRow(rowData, sectionId, rowId)}
networkParams={["http://v5.pc.duomi.com/search-ajaxsearch-searchall?", 'kw=相愛&pi=@&pz=4', "kFinancialRecords"]}
/>
然后這個是_renderRow在當前類實現一個自定義的item
- 效果
loadmore.gif
4.總結
有需要的可以下載我的呆萌： Demo
