react native ActivityIndicator使用详解

react-native版本：0.43

ActivityIndicator的效果类似我们平时看到了loading，在android中ActivityIndicator是progressBar 的Indeterminate（false）模式，说白了就是一个半圆转啊转。
具体属性：
1、ViewPropTypes props… ：包含View控件的所有属性，具体咱们看View的属性解释。
2、animating：是否显示，默认true（显示）
3、color： 指示器的颜色， ios默认为gray（#999999），android 默认使用progressBar的系统样式，取决于你设置的style。
4、size： 表示大小，可以设置的值有：
‘small’: 宽高各20
‘large’: 宽高各36
5、hidesWhenStopped：此属性只在ios生效，当停止动画的时候，是否隐藏。默认为true。

demo：

import React, {Component} from 'react';
    import {
        StyleSheet,
        View,
        Text,
        ActivityIndicator,
    } from 'react-native';
    export default class ActivityIndicatorDemo extends Component {

    render() {
        return (
            <View style={{flex:1}}>
                <View style={{flexDirection:'row'}}>
                    <Text>全部默认：</Text>
                    <ActivityIndicator />
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>添加背景色：</Text>
                    <ActivityIndicator style={{backgroundColor:'blue'}}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>animating=false （隐藏）：</Text>
                    <ActivityIndicator animating={false}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>设置color：</Text>
                    <ActivityIndicator color='red'/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>size small：</Text>
                    <ActivityIndicator size="small"/>
                    <Text>size large：</Text>
                    <ActivityIndicator size="large"/>

                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>view props属性设置：</Text>
                    <ActivityIndicator style={{height:100,width:80,backgroundColor:'black'}} />

                </View>
            </View>
        );
    }
    }

效果图：

github下载地址