搭建react-native项目框架之耗时代码处理与Loading加载动画

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

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

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

/**
 * 调用说明：
 *{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 ({}}
            >);
    }
}

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

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

import Loading from './components/loading';

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

            {/*{/*......*/}
                {/**/}
                {/**/}{this.Loading = r}} hide = {true} />

定义全局的方法

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