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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
人机交互程序 python实现人机对话
2017/11/14 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
军训学生自我鉴定
2014/02/12 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL