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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php zip文件解压类代码
2009/12/02 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Linux下python制作名片示例
2018/07/20 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
为什么要使用servlet
2016/01/17 面试题
教师实习的自我鉴定
2013/10/26 职场文书
商业项目策划方案
2014/06/05 职场文书
小学运动会宣传稿
2015/07/23 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript