在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，这个没什么说的

1. loaded：用来控制整个页面的菊花
2. error：如果Request错误，显示一个错误页面
3. 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}); 
 }); 
} 

这里的细节挺多的:

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

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

# ReactNative实现上拉刷新  # react  # 刷新组件  # 上拉刷新组件  # react-native android状态栏的实现  # React-native桥接Android原生开发详解  # React-Native之Android(6.0及以上)权限申请详解  # react-native 封装选择弹出框示例(试用ios&android)  # React-Native Android 与 IOS App使用一份代码实现方法  # Android React-Native通信数据模型分析  # android中使用react-native设置应用启动页过程详解  # 加载  # 也会  # 多个  # 加载中  # 就会  # 如果你  # 会在  # 每页  # 几点  # 会把  # 来实现  # 中都  # 第一页  # 需要注意  # 服务端  # 大家多多  # 清空  # 如何实现  # 条数  # 挺多 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用模型观察者？（Observer代码示例）  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？  详解阿里云nginx服务器多站点的配置  Laravel如何使用Eloquent进行子查询  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  如何快速搭建高效WAP手机网站吸引移动用户？  网站优化排名时，需要考虑哪些问题呢？  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Android Socket接口实现即时通讯实例代码  如何快速搭建支持数据库操作的智能建站平台？  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  JavaScript Ajax实现异步通信  用v-html解决Vue.js渲染中html标签不被解析的问题  如何在腾讯云免费申请建站？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  如何在宝塔面板中创建新站点？  详解Android图表 MPAndroidChart折线图  如何在建站宝盒中设置产品搜索功能？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  如何快速登录WAP自助建站平台？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  如何基于云服务器快速搭建网站及云盘系统？  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  js实现点击每个li节点，都弹出其文本值及修改  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  Java解压缩zip - 解压缩多个文件或文件夹实例  EditPlus中的正则表达式 实战(4)  香港服务器部署网站为何提示未备案？  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  如何在橙子建站中快速调整背景颜色？  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  Laravel如何记录自定义日志？（Log频道配置）  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何用y主机助手快速搭建网站？  如何在阿里云香港服务器快速搭建网站？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  太平洋网站制作公司,网络用语太平洋是什么意思？  nodejs redis 发布订阅机制封装实现方法及实例代码  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  如何做网站制作流程,*游戏网站怎么搭建？  javascript日期怎么处理_如何格式化输出  Linux系统运维自动化项目教程_Ansible批量管理实战  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)