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面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
投标人法定代表人授权委托书格式
2014/09/28 职场文书
小学毕业感言200字
2015/07/30 职场文书
实习感想范文
2015/08/10 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Python sklearn分类决策树方法详解
2022/09/23 Python