基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

今天我们讲解的这个控件的非常简单,那就是ActivityIndicator,它替代了我们之前所说的那个ProgressbarAndroid,功能就是和ProgressbarAndroid一样,显示一个正在加载的状况和进度。

官网上是这么形容我的:显示一个圆形loading提示。我们直接看属性吧。

属性

  • animating bool 是否要显示这个加载指示器,默认true是显示,false隐藏
  • color 指示器圆圈的前景色,默认灰色
  • size [ ‘small’, ‘large’ ] 指示器大小
  • hidesWhenStopped bool ios独有 当没有加载动画的时候是否隐藏

实例展示

由于太简单了,效果图也没什么,直接看吧,如下:

实例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);

loonggg wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号「 非著名程序员」!
坚持原创技术分享,您的支持将鼓励我继续创作!