React Native中的RefreshContorl下拉刷新使用


Posted in Javascript onOctober 09, 2017

我们知道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 相关文章推荐
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
JS实现的全排列组合算法示例
Oct 09 #Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 #Javascript
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
js用类封装pop弹窗组件
Oct 08 #Javascript
利用js编写网页进度条效果
Oct 08 #Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
wxPython之解决闪烁的问题
2018/01/15 Python
基于python实现学生管理系统
2018/10/17 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
幼儿教师研修感言
2014/02/12 职场文书
学前班评语大全
2014/05/04 职场文书
单位未婚证明范本
2014/11/25 职场文书
员工离职感谢信
2015/01/22 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL