网络请求等延时操作往往都会用到loading，遮罩在当前页面，react natvie自带的loading组件ActivityIndicator往往不能满足需求，我们就需要自定义loading组件了。

因为loading是个很简单的功能，没必要去安装一个组件，主要通过Modal和ActivityIndicator实现。

Loading.js

'use strict';
import React from 'react';
import PropTypes from 'prop-types'
import {StyleSheet, Text, View, Modal, ActivityIndicator} from 'react-native';

let lo;
const defaultTimeOut = -1;//设置显示时间标识

export class EasyLoading {

    /**
     * 显示Loading
     * @param text  Loading显示文本，默认为'加载中'
     * @param timeout Loading显示时间，为-1时会一只显示，需要手动关闭
     */
    static show(text = '加载中...', timeout = defaultTimeOut) {
        console.log(timeout);
        lo.setState({"isShow": true, "text": text, "timeout": timeout});
    }

    /**
     * 关闭Loading
     */
    static dismiss() {
        lo.setState({"isShow": false});
    }
}

export class Loading extends React.Component {

    static propTypes = {
        color: PropTypes.string,
        textStyle: PropTypes.any,
        loadingStyle: PropTypes.any,
    };

    constructor(props) {
        super(props);
        this.handle = 0;
        this.state = {
            isShow: false,
            timeout: defaultTimeOut,
            text: "加载中..."
        };
        lo = this;
    }

    componentWillUnmount() {
        clearTimeout(this.handle);
    }

    render() {
        clearTimeout(this.handle);

        (this.state.timeout !== defaultTimeOut) && (this.handle = setTimeout(() => {
            EasyLoading.dismiss();
        }, this.state.timeout));

        return (
            <Modal
                animationType={"fade"}
                transparent={true}
                visible={this.state.isShow}
                onRequestClose={() => {
                    alert("Modal has been closed.")
                }}>
                <View style={styles.container}>
                    <View style={[styles.load_box, this.props.loadingStyle]}>
                        <ActivityIndicator animating={true} color={this.props.color || '#FFF'} size={'large'}
                                           style={styles.load_progress}/>
                        <Text style={[styles.load_text, this.props.textStyle]}>{this.state.text}</Text>
                    </View>
                </View>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    load_box: {
        width: 100,
        height: 100,
        backgroundColor: '#000',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10
    },
    load_progress: {
        width: 50,
        height: 50
    },
    //默认字体颜色
    load_text: {
        color: '#FFF',
    },
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(178,178,178,0.8)',
    },
});

使用

//引入组件,"../custom/EasyLoading"为EasyLoading.js文件存放的路径
import {EasyLoading, Loading} from "../custom/EasyLoading";

 _showLoading() {
        //EasyLoading.show();//显示
        //EasyLoading.dimiss();//关闭
       //自定义文本和超时时间
        EasyLoading.show('加载中...', 2000);
    }

    render() {

        return (<View style={styles.container}>
                <Button title={'show loading'} onPress={() => this._showLoading()}>
                <Loading/>
            </View>
        );
    }

自定义样式

 <Loading color={'red'} loadingStyle={{backgroundColor: 'lightgreen'}} textStyle={{color: 'red', fontSize: 18}}/>