React native ListView 增加顶部下拉刷新和底下点击刷新示例

2019-11-19 13:56:37

字体：大中小

来源：转载

供稿：网友

1. 底部点击刷新

1.1 先增加一个按钮

render() {  if(!this.state.data){   return(     <Text>Loading... </Text>   )  }else{   return(     <ListView      refreshControl={       <RefreshControl          refreshing = {false}         onRefresh = {this.reloadWordData.bind(this)}       />      }      dataSource={this.state.data}      renderRow={(rowData)=>this.renderRow(rowData)}      renderFooter={this.renderFooter.bind(this)}     >      </ListView>    );  } } renderFooter(){   return (   <View style={{marginVertical: 10, marginBottom:20}} >      <Button       onPress={this.addMoreOnFoot.bind(this)}       title="点击载入更多"      />    </View>   ) }

给ListView 增加一个renderFooter 方法来绘制底部元素。在里面显示一个按钮。

按钮处理逻辑：

addMoreOnFoot(){ // alert('addMoreOnFoot') // console.log('addMoreOnFoot') const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0' fetch(url) .then((response)=>response.json()) .then((jsondata)=>{   if (jsondata.data && jsondata.data.length > 0){   const rowData = this.state.jsondata.concat(jsondata.data);   this.setState({    footLastId:jsondata.data[jsondata.data.length - 1]['id'],    jsondata:rowData,    data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),   })   } }) .catch((error)=>{  alert(error); });}

点击后进行网络处理，把之前最后一条id也传给服务器，让服务器返回这个id后面的20条记录。然后重新setState即可。

2. 头部下拉刷新

ListView中增加RefeshControl

render() {  if(!this.state.data){   return(     <Text>Loading... </Text>   )  }else{   return(      <ListView      refreshControl={       <RefreshControl          refreshing = {false}         onRefresh = {this.reloadWordData.bind(this)}       />      }      dataSource={this.state.data}      renderRow={(rowData)=>this.renderRow(rowData)}      renderFooter={this.renderFooter.bind(this)}     >      </ListView>    );  } }

载入最新的头部数据添加到this.State中

reloadWordData(){  // alert(this.state.topLastId)  const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1'  fetch(url)  .then((response)=>response.json())  .then((jsondata)=>{    if (jsondata.data && jsondata.data.length > 0){    const rowData = jsondata.data.concat(this.state.jsondata);    this.setState({     topLastId:jsondata.data[0]['id'],     jsondata:rowData,     data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),    })    }  })  .catch((error)=>{   alert(error);  }); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

下一篇：React Native日期时间选择组件的示例代码