react-native ListView下拉刷新上拉加载实现代码

本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家，具体如下：

先看效果图

下拉刷新

React Native提供了一个组件可以实现下拉刷新方法RefreshControl

使用方法

<ListView
 refreshControl={
 <RefreshControl
 refreshing={this.state.refreshing}
 onRefresh={this._onRefresh.bind(this)}
 />
 }
 //...
</ListView>

在视图加载的时候的时候，将refreshing设置为true，数据加载完成设置为false即可

上拉加载

利用ListView里的onEndReached方法实现，ListView在滚动到最后一个Cell的时候,会触发onEndReached方法

先在ListView里添加一个Footer

render() {
 const FooterView = this.state.loadMore ?
 <View style={styles.footer}>
 <Text style=>加载更多...</Text>
 </View> : null;
 return <ListView
 refreshControl={
 <RefreshControl
  refreshing={this.state.refreshing}
  onRefresh={this._onRefresh.bind(this)}
 />
 }
 style={[styles.listView]}
 dataSource={ds.cloneWithRows(this.state.dataSource)}
 enableEmptySections={true}
 renderRow={this._renderRow.bind(this)}
 onEndReachedThreshold={5}
 onEndReached={this._onEndReached.bind(this)}
 renderFooter={() => FooterView}
 />
 }

在方法_onEndReached里将Footer显示出来，在数据加载完成之后，再隐藏掉Footer

_onEndReached() {
 this.setState({
 loadMore: true,
 pageNo: this.state.pageNo + 1
 });
 this._fetchData();
 }

说明

ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用，它的意思是：像素的临界值，该属性和onEndReached配合使用，因为onEndReached滑动结束的标志是以该值作为判断条件的

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

# reactnative  # 下拉加载  # react  # native下拉刷新  # native上拉加载  # react native之ScrollView下拉刷新效果  # react native基于FlatList下拉刷新上拉加载实现代码示例  # React native ListView 增加顶部下拉刷新和底下点击刷新示例  # React Native 自定义下拉刷新上拉加载的列表的示例  # React Native中的RefreshContorl下拉刷新使用  # react实现原生下拉刷新  # 加载  # 设置为  # 临界值  # 给大家  # 可以实现  # 先在  # 先看  # 大家多多  # 以该  # refreshControl  # refreshing  # brush  # js  # lt  # state  # gt  # Native  # bind  # onRefresh  # _onRefresh 

相关文章： 如何选购建站域名与空间？自助平台全解析  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  详解jQuery停止动画——stop()方法的使用  建站之星安全性能如何？防护体系能否抵御黑客入侵？  python的本地网站制作,如何创建本地站点？  如何通过商城免费建站系统源码自定义网站主题？  如何在Tomcat中配置并部署网站项目？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何零成本快速生成个人自助网站？  ,南京靠谱的征婚网站？  网站图片在线制作软件,怎么在图片上做链接？  网站代码制作软件有哪些,如何生成自己网站的代码？  如何用PHP快速搭建高效网站？分步指南  在线教育网站制作平台,山西立德教育官网？  如何在建站主机中优化服务器配置？  大连网站设计制作招聘信息,大连投诉网站有哪些？  建站之星2.7模板快速切换与批量管理功能操作指南  如何通过万网虚拟主机快速搭建网站？  如何优化Golang Web性能_Golang HTTP服务器性能提升方法  常州企业网站制作公司,全国继续教育网怎么登录？  TestNG的testng.xml配置文件怎么写  网站专业制作公司有哪些,做一个公司网站要多少钱？  临沂网站制作公司有哪些,临沂第四中学官网？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  定制建站流程解析：需求评估与SEO优化功能开发指南  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  建站之星伪静态规则如何设置？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  如何在服务器上配置二级域名建站？  制作证书网站有哪些,全国城建培训中心证书查询官网？  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  ,交易猫的商品怎么发布到网站上去？  如何注册花生壳免费域名并搭建个人网站？  如何获取开源自助建站系统免费下载链接？  西安大型网站制作公司,西安招聘网站最好的是哪个？  魔方云NAT建站如何实现端口转发？  北京网站制作公司哪家好一点,北京租房网站有哪些？  如何在Windows 2008云服务器安全搭建网站？  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  如何在企业微信快速生成手机电脑官网？  如何用IIS7快速搭建并优化网站站点？  如何获取免费开源的自助建站系统源码？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  如何有效防御Web建站篡改攻击？  建站org新手必看：2024最新搭建流程与模板选择技巧  全景视频制作网站有哪些,全景图怎么做成网页？