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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
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
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
js身份证验证超强脚本
2008/10/26 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
vue如何判断dom的class
2018/04/26 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
精彩的大学生自我评价
2013/11/17 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
超市收银员岗位职责
2015/04/07 职场文书
撤诉申请怎么写
2015/05/19 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android