React Native中的RefreshContorl下拉刷新使用

更新时间：2017年10月09日 09:39:39 作者：怼码人生

本篇文章主要介绍了React Native中的RefreshContorl下拉刷新使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

我们知道App中都有下拉加载，在React Native中也有类似的控件

一、属性方法

（1） onRefresh function 在视图开始刷新的时候调用

（2） refreshing bool 视图是否在刷新时显示指示器，也表明当前是否在刷新中

（3） colors [ColorPropType] android平台适用进行设置加载进去指示器的颜色，至少设置一种，最多可以设置4种

（4） enabled bool android平台适用用来设置下拉刷新功能是否可用

（5） progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色

（6） size RefreshLayoutConsts.SIZE.DEFAULT android平台适用加载进度指示器的尺寸大小

（7） tintColor ColorPropType iOS平台适用设置加载进度指示器的颜色

（8）title string iOS平台适用设置加载进度指示器下面的标题文本信息

二、使用方法

<ScrollView
    refreshControl={
     <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh}
      tintColor="#ff0000"
      title="Loading..."
      titleColor="#00ff00"
      colors={['#ff0000', '#00ff00', '#0000ff']}
      progressBackgroundColor="#ffff00"
     />
    }
/>
 
_onRefresh() {
     this.setState({
       isRefreshing:true
     });
     
     var self = this;
     setTimeout(()=>{
 
      //加载数据
     },2000)
}

这样就出现加载效果了

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

您可能感兴趣的文章:

JavaScript中React面向组件编程（上）
本文主要介绍了React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。感兴趣的小伙伴可以参考阅读
2023-03-03
React Virtual DOM前端框架全面分析
这篇文章主要为大家介绍了React Virtual DOM前端框架全面分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
react实现记录拖动排序
这篇文章主要介绍了react实现记录拖动排序的相关资料,需要的朋友可以参考下
2023-07-07
React源码分析之useCallback与useMemo及useContext详解
这篇文章主要介绍了React useCallback与useMemo及useContext源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-11-11
详解react-native-fs插件的使用以及遇到的坑
本篇文章主要介绍了react-native-fs插件的使用以及遇到的坑，详细的介绍了react-native-fs安装使用，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
React hooks异步操作踩坑记录
这篇文章主要介绍了React hooks异步操作踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
记录一次完整的react hooks实践
这篇文章主要介绍了记录一次完整的react hooks实践，通过一个简单示例，介绍了react hooks，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
在 React 中使用 Redux 解决的问题小结
在 React 中组件通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能直接向上层组件传递数据，这篇文章主要介绍了使用react+redux实现弹出框案例,需要的朋友可以参考下
2022-10-10
React Native集成支付宝支付的实现方法
这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以，我们只需要在原生工程中集成支付宝和微信支付的sdk，然后使用NativeModules调用即可，需要的朋友可以参考下
2022-02-02
react源码层深入刨析babel解析jsx实现
同作为MVVM框架，React相比于Vue来讲，上手更需要JavaScript功底深厚一些，本系列将阅读React相关源码，从jsx -> VDom -> RDOM等一些列的过程，将会在本系列中一一讲解
2022-10-10