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

 更新时间:2018年04月27日 11:57:06   作者:瓦力  
这篇文章主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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);
  });
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React性能debug场景解决记录

    React性能debug场景解决记录

    这篇文章主要为大家介绍了React性能debug场景解决记录,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 深入浅析react native es6语法

    深入浅析react native es6语法

    这篇文章主要介绍了深入浅析react native es6语法的相关资料,需要的朋友可以参考下
    2015-12-12
  • React从Class方式转Hooks详解

    React从Class方式转Hooks详解

    这篇文章主要介绍了React从Class方式转Hooks详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-09-09
  • React文件分段上传实现方法详解

    React文件分段上传实现方法详解

    这篇文章主要介绍了React文件分段上传实现方法,将文件切成多个小的文件;将切片并行上传;所有切片上传完成后,服务器端进行切片合成;当分片上传失败,可以在重新上传时进行判断,只上传上次失败的部分实现断点续传;当切片合成为完整的文件,通知客户端上传成功
    2022-11-11
  • React 父子组件通信的实现方法

    React 父子组件通信的实现方法

    这篇文章主要介绍了React 父子组件通信的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • React中遍历数组生成标签问题

    React中遍历数组生成标签问题

    这篇文章主要介绍了React中遍历数组生成标签问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决

    react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决

    这篇文章主要介绍了react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决方案,具有很好的参考价值,希望对大家有所帮助。
    2022-08-08
  • React中Portals与错误边界处理实现

    React中Portals与错误边界处理实现

    本文主要介绍了React中Portals与错误边界处理实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 基于useImperativeHandle的使用解析

    基于useImperativeHandle的使用解析

    这篇文章主要介绍了基于useImperativeHandle的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在React项目中使用Eslint代码检查工具及常见问题

    在React项目中使用Eslint代码检查工具及常见问题

    这篇文章主要介绍了在React项目中使用Eslint代码检查工具及常见问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论