React-Native ActivityIndicator

ActivityIndicator显示一个圆形的loading提示符号

主要有4个属性：

animating：是否显示动画，默认true

color：圈圈的颜色，默认是灰色

hidesWhenStopped：当停止动画的时候是否隐藏，默认true隐藏

size：大小，enum('small', 'large')，small高度为20，large为36

实现ActivityIndicator：
<pre>
<ActivityIndicator animating={true}
hidesWhenStopped={false}
size="large"
color={'#ff1111'}>
</ActivityIndicator>
</pre>
完整事例，显示一个ActivityIndicator，停止和开始动画：
<pre>
import React, { Component } from 'react';
import {
AppRegistry,
ActivityIndicator,
TouchableOpacity,
Text,
View
} from 'react-native';

export default class ActivityView extends Component {
constructor(props) {
super(props);
this.state = {
animation: true,
}
}
render() {
return(
<View style={{backgroundColor: '#ffaaaa', flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<ActivityIndicator style={{backgroundColor: '#aaffaa', padding: 10}}
animating={this.state.animation}
hidesWhenStopped={false}
size="large"
color={'#ff1111'}>
</ActivityIndicator>
<TouchableOpacity onPress={this.actionActivityIndicator}>
<Text>
开始，暂停动画
</Text>
</TouchableOpacity>
</View>
)
}
actionActivityIndicator = () => {
this.setState({animation: !this.state.animation});
}
}
AppRegistry.registerComponent('ActivityView', ()=> ActivityView);
</pre>
效果：