react-native 实现全局loading 调用

react-native 实现全局loading 调用

在调用网络接口或者做一些耗时操作的时候，会展示一个loading动画，使用户等待处理完后在进行其他操作，这个loading动画，如果每个页面都写，会写很多重复代码，不建议这么做。
为了实现全局唯一loading动画，可以使用
方式一
react-native-root-siblings https://github.com/magicismight/react-native-root-siblings；

推荐使用方式二

方式二
在应用组件的最外层setup.js添加一个自定义的MyLoading组件代码如下：

import React, { Component } from "react";
import App from "./App";
import MyLoading from "./component/MyLoading";
import { View } from "react-native";

export default class setup extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            
                
                { {
                        global.mLoadingComponentRef = ref;
                    }}
                />}
            
        );
    }

}

MyLoading.js:

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View,Dimensions } from "react-native";

let width = Dimensions.get('window').width,
let height = Dimensions.get('window').height,
export default class MyLoading extends React.Component {
    constructor(props) {
        super(props);
        this.minShowingTime = 200;
        this.state = {
            isLoading : false,
            setIsLoading : (isLoading) => {
                if (isLoading != this.state.isLoading) {
                    let curTimeLong = new Date().getTime();
                    if (isLoading) {
                        this.startTime = curTimeLong;
                        this.setState({
                            isLoading
                        });
                    } else {
                        let hasShowingTimeLong = curTimeLong - this.startTime;
                        if (hasShowingTimeLong < this.minShowingTime) {
                            setTimeout(() => {
                                this.setState({
                                    isLoading
                                });
                            }, this.minShowingTime - hasShowingTimeLong);

                        } else {
                            this.setState({
                                isLoading
                            });
                        }
                    }

                }
            },
        };
    }

    showLoading = () => {
        this.state.setIsLoading(true);
    };
    dismissLoading = () => {
        this.state.setIsLoading(false);

    };

    render() {
        if (!this.state.isLoading) {
            return null;
        }
        return (
            
                
                    
                    请稍后...
                
            
        )
    }
}

const styles = StyleSheet.create({
    loading : {
        backgroundColor : '#10101099',
        height : 80,
        width : 100,
        borderRadius : 10,
        justifyContent : 'center',
        alignItems : 'center',
        position : 'absolute',
        top : (height - 80) / 2,
        left : (width - 100) / 2,
    },

    loadingTitle : {
        marginTop : 10,
        fontSize : 14,
        color : 'white'
    }
});

添加LoadingUtil.js工具类：

/**
 * 全局唯一的Loading显示隐藏工具类。
 * use:

 导入：import LoadingUtil from "./LoadingUtil";
 
 显示：LoadingUtil.showLoading();
 隐藏：LoadingUtil.dismissLoading();

 */


let LoadingUtil = {
    showLoading(timeOut = 10000){
        global.mLoadingComponentRef && global.mLoadingComponentRef.showLoading();
        this.timerLoading = setTimeout(() => {
            this.dismissLoading();
        }, timeOut);

    },
    dismissLoading(){
        global.mLoadingComponentRef && global.mLoadingComponentRef.dismissLoading();
        this.timerLoading && clearTimeout(this.timerLoading);

    },
};

export default LoadingUtil;

使用：

import LoadingUtil from "./LoadingUtil";

在需要显示loading动画的地方调用：

LoadingUtil.showLoading();

在需要隐藏loading动画的地方调用：

LoadingUtil.dismissLoading();