这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示:

可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置的,这个组件本身就有一个属性是设置其大小的,两个选项,一大一小。这里顺便就介绍一些该组件的属性:

  • animating:这个参数接受布尔型的值,表示是否显示加载指示器。
  • color:string型参数,用来设置指示器的颜色,默认是灰色的,我们一般也不管他。
  • hidesWhenStopped(仅iOS可用):在没有动画的时候,是否要隐藏指示器(默认为true)。
  • size:这就是设置尺寸的,就两个选项,small和large,一小一大。

能设置的就这几个参数,接下来我们看看这个例子。例子中有一个按钮,控制了指示器的显示和隐藏。按钮我们用TouchableOpacity组件来实现,这个组件可以添加一个响应方法,下面我们放一小一大两个指示器,代码如下:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ActivityIndicator,
TouchableOpacity
} from 'react-native'; class RNActivityIndicatorDemo extends Component { constructor(props) {
super(props);
this.state = {// 初始设为显示加载动画
animating: true,
};
} // 按钮响应方法,切换显示与隐藏
showOrHide() {
if (this.state.animating) {
this.setState({
animating: false
});
} else {
this.setState({
animating: true
});
}
} render() {
return (
<View style={styles.container}>
{/* 切换显示或隐藏的按钮 */}
<TouchableOpacity underlayColor="#fff" style={styles.btn} onPress={
this.showOrHide.bind(this)}>
<Text style={{color:'#fff', fontSize: 20}}>显示/隐藏</Text>
</TouchableOpacity>
{/* 小号的指示器 */}
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="small" />
{/* 大号的指示器 */}
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="large" />
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
btn:{
marginTop:10,
width:150,
height:35,
backgroundColor:'#3BC1FF',
justifyContent:'center',
alignItems:'center',
borderRadius:4,
},
}); AppRegistry.registerComponent('RNActivityIndicatorDemo', () => RNActivityIndicatorDemo);

看代码,我们首先就在state中加了一个变量animating,用来控制指示器的显示与隐藏,初始是显示的。然后看我们的界面元素部分,即render中的部分,除了最外面一层view外,最上面就是一个TouchableOpacity,onPress属性指向了一个响应方法,即showOrHide方法,在这个方法中我们可以看到,很简单地实现了一个通过animating变量切换显示与隐藏的功能。因此下面的ActivityIndicator元素中我们的animating属性是用state中的animating变量来控制的,其余的属性我们基本是默认的,size一小一大,很简单的例子。

这里可以下载我的示例工程:https://github.com/Cloudox/RNActivityIndicatorDemo 
版权所有:http://blog.csdn.net/cloudox_

引用原文:https://blog.csdn.net/cloudox_/article/details/52440547

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

React Native中加载指示器组件ActivityIndicator使用方法的更多相关文章

  1. React Native :加载新闻列表

    代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...

  2. 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作

    点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...

  3. 实现react路由动态加载的组件

    import React, { Component } from 'react'; import Loading from '../../base/nc_Loading'; /* * date: 20 ...

  4. React Native 首次加载白屏优化

    RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...

  5. 在主Android Activity中加载Fragment的一般简易方法 ,来模拟一个微信界面。

    在Fragment的生命周期中,需要重点关注onCreate.onCreateView.onViewCreated.Activity与Fragment生命周期在设计模式上大体一致. package c ...

  6. 关于spring MVC中加载多个validator的方法。

    首先讲下什么叫做validator: validator是验证器,可以验证后台接受的数据,对数据做校验. SpringMVC服务器验证有两种方式,一种是基于Validator接口,一种是使用Annot ...

  7. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  8. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  9. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

随机推荐

  1. NOIp2016 Day1&amp;Day2 解题报告

    Day1 T1 toy 本题考查你会不会编程. //toy //by Cydiater //2016.11.19 #include <iostream> #include <cstd ...

  2. 正确解读free -m

    如下显示free是显示的当前内存的使用,-m的意思是M字节来显示内容.我们来一起看看. $ free -m total used free shared buffers cachedMem: 1002 ...

  3. Sql Server如何新建计划任务

    打开Sql Server数据库,在管理中找到维护计划功能,右击维护计划选择维护计划向导.如图所示: 打开维护计划向导后,在第一个步骤下输入计划名称. 输入完计划名称后,点击右下角的更改按钮,这里是配置 ...

  4. Goldengate 12.2新特性-自描述的队列文件

    OGG12.2中最大的变化之一就是队列文件是自描述的,意思是不再担心以前版本中,表结构异构的情况,也不再需要defgen生成定义文件,以及不再使用assumeTargetDefs或SourceDefs ...

  5. C#_会员管理系统:开发八(权限分配)

    数据库设计 这里由于增加了普通用户权限值,我们需要对数据库结构稍作修改.这里在MovieAccount表中增加4列内容 分别用于 RightFManager       判断普通用户管理界面权限   ...

  6. 如何查看和更改mysql数据库文件存放位置

    mysql数据库的数据文件默认是存放在:C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.1\data ...

  7. 粒子系统属性Life,发射速率和总数的关系

    提示,粒子系统的life,发射速率以及总粒子数是相互影响的. 如果你要发射器射出粒子流然后停顿一会,你将简单的必须确保lifetime和发射速率相匹配以至于在发射出的粒子达到粒子总数之前一些粒子是活跃 ...

  8. const命令,全局变量的属性,变量的解构赋值

    const命令 1:声明常量(只在当前代码块中有效)---注意声明的常量可以是对象,但是常量储存的是对象的地址,地址声明后不可变,但是可以给常量对象添加属性 全局变量的属性 1:window和glob ...

  9. [LeetCode] 16. 最接近的三数之和

    题目链接:https://leetcode-cn.com/problems/3sum-closest/ 题目描述: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 num ...

  10. 脚本添加crontab任务

    #!/bin/bash export LANG=en_US.utf8 cur_dir=$(cd ``;pwd) job_cmd_info="\n# 每天凌晨5点运行定时删除工具\n" ...