【搭建react-native项目框架】5.耗时代码处理，Loading加载动画

我们经常需要执行耗时较长的代码。为了良好的用户体验，我们在异步处理耗时代码时，采用Loading加载动画的形式来等待处理。

这里参考了《React native Model组件的使用》。

1.在components下新建loading.js文件，如下

/**
 * 调用说明：
 * <Loading ref={r=>{this.Loading = r}} hide = {true} /> //放在布局的最后即可
 * 在需要显示的地方调用this.Loading.show();
 * 在需要隐藏的地方调用this.Loading.close();
 */

import React, { Component } from 'react';
import {
    Platform,
    View,
    ActivityIndicator,
    Modal,
} from 'react-native';

import PropTypes from 'prop-types';

export default class Loading extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: !this.props.hide,
        }
    }

    close() {
        if (Platform.OS === 'android') {
            setTimeout(()=>{
                this.setState({modalVisible: false});
            },1000)
        }else {
            this.setState({modalVisible: false});
        }
    }

    show() {
        this.setState({modalVisible: true});
    }

    render() {
        if (!this.state.modalVisible) {
            return null
        }
        return (
            <Modal
                animationType={"none"}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {}}
            >
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                    <View style={{borderRadius: 10, backgroundColor: 'rgba(0,0,0,0.5)', width: 100, height: 100, alignItems: 'center'}}>
                        <ActivityIndicator
                            animating={true}
                            color='white'
                            style={{
                                marginTop: 20,
                                width: 60,
                                height: 60,
                            }}
                            size="large" />
                    </View>
                </View>
            </Modal>
        );
    }
}

Loading.PropTypes = {
    hide: PropTypes.bool.isRequired,
};

2.在App.js中引入loading.js

import Loading from './components/loading';

在最外层的View中底部渲染Loading

            <View style={[{flex: 1}]}>
                {/*<Router sceneStyle={[styles.router]}>
                    {/*......*/}
                {/*</Router>*/}
                {/*<PlayButton />*/}
                <Loading ref={r=>{this.Loading = r}} hide = {true} />
            </View>

定义全局的方法

let self; //将App组件中的this赋给全局的self
global.showLoading = false; //所有子页面均可直接调用global.showLoading()来展示Loading
global.closeLoading = false; //所有子页面均可直接调用global.closeLoading()来关闭Loading

给全局方法赋值，使其可以在任何页面调用

    componentDidMount() {
        self = this;
        global.showLoading = function() {
            self.Loading.show();
        };
        global.closeLoading = function() {
            self.Loading.close();
        };
    }

调用Loading

    _showLoading() {
        global.showLoading();
        setTimeout(()=>{
            global.closeLoading();
        },500)
    }

this._showLoading();