在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狀態機變量
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，這個沒什么說的
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}); }); } 這里的細節挺多的:
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>); } } 根據狀態機變量foot控制Footer的顯示
8、onEndReached 定義
onEndReachedThreshold={0}
當所有的數據都已經渲染過，并且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調用。原生的滾動事件會被作為參數傳遞。譯注：當第一次渲染時，如果數據不足一屏（比如初始值是空的），這個事件也會被觸發
_endReached(){ if(this.state.foot != 0 ){ return ; } this.setState({ foot:2, }); this.timer = setTimeout( () => { pageNum ++; this._fetchListData(); },500); } 這里需要注意一下幾點
1、第一屏的時候可能也會觸發_endReached方法，所以需要判斷foot為非 0（即加載中和已加載完畢）時，直接return
2、上拉時，觸發_endReached方法，可能server端接口響應很快，幾乎看不到菊花效果，特地加了個500毫秒的等待
9、卸載Timer
componentWillUnmount() { // 如果存在this.timer，則使用clearTimeout清空。 // 如果你使用多個timer，那么用多個變量，或者用個數組來保存引用，然后逐個clear this.timer && clearTimeout(this.timer); } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
