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面向组件编程(上)

    JavaScript中React面向组件编程(上)

    本文主要介绍了React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state、props、refs。感兴趣的小伙伴可以参考阅读
    2023-03-03
  • React Virtual DOM前端框架全面分析

    React Virtual DOM前端框架全面分析

    这篇文章主要为大家介绍了React Virtual DOM前端框架全面分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • react实现记录拖动排序

    react实现记录拖动排序

    这篇文章主要介绍了react实现记录拖动排序的相关资料,需要的朋友可以参考下
    2023-07-07
  • React源码分析之useCallback与useMemo及useContext详解

    React源码分析之useCallback与useMemo及useContext详解

    这篇文章主要介绍了React useCallback与useMemo及useContext源码分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • 详解react-native-fs插件的使用以及遇到的坑

    详解react-native-fs插件的使用以及遇到的坑

    本篇文章主要介绍了react-native-fs插件的使用以及遇到的坑,详细的介绍了react-native-fs安装使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • React hooks异步操作踩坑记录

    React hooks异步操作踩坑记录

    这篇文章主要介绍了React hooks异步操作踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 记录一次完整的react hooks实践

    记录一次完整的react hooks实践

    这篇文章主要介绍了记录一次完整的react hooks实践,通过一个简单示例,介绍了react hooks,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 在 React 中使用 Redux 解决的问题小结

    在 React 中使用 Redux 解决的问题小结

    在 React 中组件通信的数据流是单向的,顶层组件可以通过 props 属性向下层组件传递数据,而下层组件不能直接向上层组件传递数据,这篇文章主要介绍了使用react+redux实现弹出框案例,需要的朋友可以参考下
    2022-10-10
  • React Native集成支付宝支付的实现方法

    React Native集成支付宝支付的实现方法

    这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以,我们只需要在原生工程中集成支付宝和微信支付的sdk,然后使用NativeModules调用即可,需要的朋友可以参考下
    2022-02-02
  • react源码层深入刨析babel解析jsx实现

    react源码层深入刨析babel解析jsx实现

    同作为MVVM框架,React相比于Vue来讲,上手更需要JavaScript功底深厚一些,本系列将阅读React相关源码,从jsx -> VDom -> RDOM等一些列的过程,将会在本系列中一一讲解
    2022-10-10

最新评论