React-Native ActivityIndicator

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

主要有4个属性：

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

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

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

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

实现ActivityIndicator：

  hidesWhenStopped={false}
 size="large"
 color={'#ff1111'}>
 
 

完整事例，显示一个ActivityIndicator，停止和开始动画：

 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(
 
  animating={this.state.animation}
 hidesWhenStopped={false}
 size="large"
 color={'#ff1111'}>
 
 
 
 开始，暂停动画
 
 
 
 )
 }
 actionActivityIndicator = () => {
 this.setState({animation: !this.state.animation});
 }
 }
 AppRegistry.registerComponent('ActivityView', ()=> ActivityView);
 

效果：

Untitled7.gif