脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → reactnative 下拉加载

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

 更新时间：2017年08月03日 09:22:14   作者：Tomoya  
本篇文章主要介绍了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滑动结束的标志是以该值作为判断条件的

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

您可能感兴趣的文章:

相关文章

  • React 之 Suspense提出的背景及使用详解

    React 之 Suspense提出的背景及使用详解

    这篇文章主要为大家介绍了React 之 Suspense提出的背景及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 浅谈react 16.8版本新特性以及对react开发的影响

    浅谈react 16.8版本新特性以及对react开发的影响

    本文主要介绍了react 16.8版本新特性以及对react开发的影响，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • useEffect 返回函数执行过程源码解析

    useEffect 返回函数执行过程源码解析

    这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • React Hooks获取数据实现方法介绍

    React Hooks获取数据实现方法介绍

    这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • React中完整实例讲解Recoil状态管理库的使用

    React中完整实例讲解Recoil状态管理库的使用

    这篇文章主要介绍了React中Recoil状态管理库的使用，Recoil的产生源于Facebook内部一个可视化数据分析相关的应用，在使用React的实现的过程中，因为现有状态管理工具不能很好的满足应用的需求，因此催生出了Recoil，对Recoil感兴趣可以参考下文
    2023-05-05
  • react16+antd4 RangePicker组件实现时间禁选示例

    react16+antd4 RangePicker组件实现时间禁选示例

    这篇文章主要为大家介绍了react16+antd4 RangePicker 时间禁选示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • react装饰器与高阶组件及简单样式修改的操作详解

    react装饰器与高阶组件及简单样式修改的操作详解

    这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • React 模式之纯组件使用示例详解

    React 模式之纯组件使用示例详解

    这篇文章主要为大家介绍了React 模式之纯组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 搭建React Native热更新平台的详细过程

    搭建React Native热更新平台的详细过程

    这篇文章主要介绍了搭建React Native热更新平台,要实现 React Native 热更新功能，有四种思路 Code Push、Pushy、Expo 和自研，感兴趣的朋友一起通过本文学习吧
    2022-05-05
  • React中使用antd组件的方法

    React中使用antd组件的方法

    antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品，这篇文章主要介绍了React中使用antd组件,需要的朋友可以参考下
    2022-09-09

最新评论