React-Native實現ListView組件之上拉刷新實例（iOS和Android通用）

更新時間：2017年07月11日 16:55:40 作者：coder_小刀

本篇文章主要介紹了React-Native實現ListView組件之上拉刷新實例（iOS和Android通用），具有一定的參考價值，有興趣的可以了解一下

在web應用中,上拉刷新加載更多,下拉刷新列表的操作非常常見,那么在React-Native中是如何實現呢,我們具體來看一下
ReactNative提供了RefreshControl下拉刷新組件，但是沒有提供上拉刷新組件，上拉刷新在App中是很常用的。

今天我們來實現一個iOS和Android通用的上拉刷新功能。

下面簡要介紹下我實現的思路。

思路：

1、常量定義：

const moreText = "加載完畢"; //foot顯示的文案 
//頁碼 
var pageNum = 1; 
//每頁顯示數據的條數 
const pageSize = 10; 
//頁面總數據數 
var pageCount = 0; 
//頁面List總數據 
var totalList = new Array(); 
 
//foot： 0 隱藏 1 已加載完成 2 顯示加載中

2、定義ListView

<ListView 
 enableEmptySections={true} 
 dataSource={this.state.dataSource} 
 renderRow={this._renderRow.bind(this)} 
 renderFooter={this._renderFooter.bind(this)} 
 onEndReached={this._endReached.bind(this)} 
 onEndReachedThreshold={0} 
/>

3、聲明State狀態(tài)機變量

ListView.DataSource實例（列表依賴的數據源）

constructor(props) { 
 super(props); 
 this.state = { 
  dataSource: new ListView.DataSource({ 
   rowHasChanged: (r1, r2) => r1 !== r2, 
  }), 
  loaded: false,//控制Request請求是否加載完畢 
  foot:0,// 控制foot， 0：隱藏foot 1：已加載完成 2 ：顯示加載中 
  error:false,

這里我們主要聲明了dataSource，這個沒什么說的

loaded：用來控制整個頁面的菊花
error：如果Request錯誤，顯示一個錯誤頁面
foot: 控制Footer的view

4、渲染頁面前，加載數據

componentWillMount() { 
 this._fetchListData(); 
}

5、Load服務端數據

_fetchListData() { 
 if(pageNum > 1){ 
  this.setState({loaded:true}); 
 } 
 fetch(requestURL, { 
  method: 'get', 
  headers: headerObj, 
 }).then(response =>{ 
  if (response.ok) { 
   return response.json(); 
  } else { 
   this.setState({error:true,loaded:true}); 
  } 
 }).then(json=>{ 
  let responseCode = json.code; 
  if (responseCode == 0) { 
   let responseData = json.data; 
 
   pageCount = responseData.count; 
   let list = responseData.data; 
 
   if (orderList == null) { 
    orderList = []; 
    currentCount = 0; 
   } else { 
    currentCount = list.length; 
   } 
   if(currentCount < pageSize){ 
    //當當前返回的數據小于PageSize時，認為已加載完畢 
    this.setState({ foot:1,moreText:moreText}); 
   }else{//設置foot 隱藏Footer 
    this.setState({foot:0}); 
   } 
   for (var i=0; i < list.length; i++) { 
    totalList.push( list[i] ); 
   } 
 
   this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(totalList), 
    loaded: true, 
   }); 
  }else{ 
   this.setState({error:true,loaded:true}); 
  } 
 }).catch(function (error) { 
  this.setState({error:true,loaded:true}); 
 }); 
}

這里的細節(jié)挺多的:

1、當pageNum > 1時，就不要整個頁面的菊花，此時loaded一直為true，這個主要是為了頁面效果，要不然沒加載一頁數據，這個屏幕就會閃一下。

2、比較當前返回的list的大小，是否小于pageSize，控制Footer是否隱藏，還是顯示已加載完畢

3、聲明了一個全局的totalList對象，每次有新數據的時候，都push進去。

如果不采用push的方式的話，直接采用setState方法的話，第二頁會把第一頁的數據覆蓋掉。

6、定義renderRow方法

renderRow={this._renderRow.bind(this)} 列表組件渲染函數，此處頁面邏輯省略。

7、定義renderFooter方法

renderFooter 頁腳會在每次渲染過程中都重新渲染。

_renderFooter() { 
 if(this.state.foot === 1){//加載完畢 
  return ( 
  <View style={{height:40,alignItems:'center',justifyContent:'flex-start',}}> 
   <Text style={{color:'#999999',fontSize:12,marginTop:10}}> 
    {this.state.moreText} 
   </Text> 
  </View>); 
 }else if(this.state.foot === 2) {//加載中 
  return ( 
  <View style={{height:40,alignItems:'center',justifyContent:'center',}}> 
   <Image source={{uri:loadgif}} style={{width:20,height:20}}/> 
  </View>); 
 } 
}

根據狀態(tài)機變量foot控制Footer的顯示

8、onEndReached 定義

onEndReachedThreshold={0}

當所有的數據都已經渲染過，并且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調用。原生的滾動事件會被作為參數傳遞。譯注：當第一次渲染時，如果數據不足一屏（比如初始值是空的），這個事件也會被觸發(fā)

_endReached(){ 
 if(this.state.foot != 0 ){ 
 return ; 
 } 
 this.setState({ 
 foot:2, 
 }); 
 this.timer = setTimeout( 
 () => { 
  pageNum ++; 
  this._fetchListData(); 
 },500); 
}

這里需要注意一下幾點

1、第一屏的時候可能也會觸發(fā)_endReached方法，所以需要判斷foot為非 0（即加載中和已加載完畢）時，直接return

2、上拉時，觸發(fā)_endReached方法，可能server端接口響應很快，幾乎看不到菊花效果，特地加了個500毫秒的等待

9、卸載Timer

componentWillUnmount() { 
// 如果存在this.timer，則使用clearTimeout清空。 
// 如果你使用多個timer，那么用多個變量，或者用個數組來保存引用，然后逐個clear 
 this.timer && clearTimeout(this.timer); 
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: