react native ActivityIndicator使用详解

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。

例子：

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>
        );
    }
}

效果图：




部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！