react-native ActivityIndicator实现

ActivityIndicator组件，显示一个圆形的 loading 提示符号。

基本属性

属性	说明
animating	是否要显示指示器动画，true表示显示，false隐藏
size	指示器的大小，small表示尺寸小，large尺寸大
color	滚轮的前景颜色
hidesWhenStopped	在animating为 false 的时候，是否要隐藏指示器

组件介绍完，下面实现功能：loading框的实现可以结合modal组件，实现一种加载中有遮罩层且不可操作的效果，上代码：

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ActivityIndicator,
    TouchableOpacity,
    Modal
} from 'react-native';
import {connect} from 'react-redux';

class ActivityIndicatorDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            animating: false,
            modalVisible: false
        }
    }
    componentDidMount(){
        this.setState({
            animating: true,
            modalVisible: true
        })
        this._timer = setTimeout(() => {
            this.setState({
                animating: false,
                modalVisible: false
            });
        }, 3000);
    }

    componentWillUnmount(){
        this._timer && clearTimeout(this._timer);
    }

    render() {
        return(
            <View style={styles.container}>
                <Modal 
                    animationType={'fade'}
                    visible={this.state.modalVisible}
                    transparent={true}
                    onRequestClose={() => {
                        // alert("Modal has been closed.");
                    }}
                >
                    <ActivityIndicator 
                        style={styles.loadingStyle}
                        size="large" // 指示器的大小
                        color='#1a94fc' // 滚轮的前景颜色
                        animating={this.state.animating} // 是否要显示指示器动画 true表示显示 false隐藏
                        hidesWhenStopped={true} // 在animating为false的时候，是否要隐藏指示器
                    />
                </Modal>
            </View>
        )
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    loadingStyle:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.1)'
    }
});

const mapStateToProps = state => ({
    nav: state.nav,
})

const mapDispatchToProps = (dispatch) => {
    return {
        dispatch
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ActivityIndicatorDemo)

效果图：

QQ20180731-161904.gif