基础篇章:关于 React Native之 ActivityIndicator 组件的讲解
时间:2022-04-28
本文章向大家介绍基础篇章:关于 React Native之 ActivityIndicator 组件的讲解,主要内容包括属性、实例展示、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
今天我们讲解的这个控件的非常简单,那就是ActivityIndicator,它替代了我们之前所说的那个ProgressbarAndroid,功能就是和ProgressbarAndroid一样,显示一个正在加载的状况和进度。
官网上是这么形容我的:显示一个圆形loading提示。我们直接看属性吧。
属性
- animating bool 是否要显示这个加载指示器,默认true是显示,false隐藏
- color 指示器圆圈的前景色,默认灰色
- size [ 'small', 'large' ] 指示器大小
- hidesWhenStopped bool ios独有 当没有加载动画的时候是否隐藏
实例展示
由于太简单了,效果图也没什么,直接看吧,如下:
实例代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
ActivityIndicator,
Text,
View
} from 'react-native';
export default class ActivityIndicatorDemo extends Component {
render() {
return (
<View style={styles.container}>
<ActivityIndicator
size="large"
color="#0000ff"
/>
<ActivityIndicator
style={{marginTop:30}}
size="small"
color="#ff00ff"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('ActivityIndicatorDemo', () => ActivityIndicatorDemo);
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决:打包SpringBoot项目成jar包后,其他的项目无法引入jar包中的对象
- 【分享】MPSoC R5引导4个A53和两个R5的应用程序的例子
- 【分享】MPSoC交叉编译例子
- JSON.stringify() 的 5 个秘密特性
- Kyverno - Kubernetes 原生策略管理引擎
- 你不知道的 Vue 单元测试(6000字实战单元测试)
- Linux系统异常排查实践与总结
- 它会不会成为OCR领域霸主?经过一个月的分析,我得出了这些结论
- 【一天一大 lee】二叉搜索树中的插入操作 (难度:中等) - Day20200930
- docker 由于iptables导致无法正常启动问题临时解决方案
- 【一天一大 lee】反转字符串 (难度:简单) - Day20201008
- 【一天一大 lee】四数之和 (难度:中等) - Day20201005
- 【一天一大 lee】两数相加 (难度:中等) - Day20201004
- 历经14天自定义3个注解解决项目的3个Swagger难题
- 【一天一大 lee】秋叶收藏集 (难度:中等) - Day20201001