ReactNative: 使用活动指示器组件ActivityIndicator组件

一、简介

在App开发中，当某一个耗时的活动或者事件被触发后，经常需要显示一个loading，表示正在等待过程中。除了第三方提供的比较完善的吐司框架外，还可以使用原生的活动指示器显示。在ReactNative中提供了ActivityIndicator组件，可以用来显示一个loading。

 

二、API

这个组件比较简单，只提供了几个比较常用的属性，如下：

//表示是否执行动画
animating: PropTypes.bool

//设置指示器的颜色
color: ColorPropType

//设置指示器大小，模式是samll。第二个参数仅支持安卓使用,通过设置一个数来表示大小。
size: PropTypes.oneOfType([
  PropTypes.oneOf([ 'small', 'large' ]),
  PropTypes.number,
])

//当动画停止时，是否隐藏
hidesWhenStopped: PropTypes.bool

 

三、使用

现在来简单使用一下这个组件，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    ActivityIndicator
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <ActivityIndicator
                    animating={true}
                    color={'red'}
                    size={'large'}
                    hidesWhenStopped={true}
                />
                <Text/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);