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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
node.js文件上传处理示例
Oct 27 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
vue实现员工信息录入功能
Jun 11 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
处理单名多值表单的详解
2013/06/08 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JavaScript使用cookie
2007/02/02 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
JS实现简单打字测试
2020/06/24 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
django的model操作汇整详解
2019/07/26 Python
python中提高pip install速度
2020/02/14 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
好人好事事迹材料
2014/02/12 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫