react-native 實(shí)現(xiàn)全局loading 調(diào)用

在調(diào)用網(wǎng)絡(luò)接口或者做一些耗時(shí)操作的時(shí)候，會(huì)展示一個(gè)loading動(dòng)畫，使用戶等待處理完后在進(jìn)行其他操作，這個(gè)loading動(dòng)畫，如果每個(gè)頁(yè)面都寫，會(huì)寫很多重復(fù)代碼，不建議這么做。
為了實(shí)現(xiàn)全局唯一loading動(dòng)畫，可以使用
方式一
react-native-root-siblings https://github.com/magicismight/react-native-root-siblings；

推薦使用方式二

方式二
在應(yīng)用組件的最外層setup.js添加一個(gè)自定義的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 (
            <View
                style={{
                    flex : 1,
                }}
            >
                <App/>
                {<MyLoading
                    ref={(ref) => {
                        global.mLoadingComponentRef = ref;
                    }}
                />}
            </View>
        );
    }

}

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 (
            <View style={{
                flex : 1,
                width : width,
                height : height,
                position : 'absolute',
                // backgroundColor:'red',
                backgroundColor : '#10101099',
            }}>
                <View style={styles.loading}>
                    <ActivityIndicator color="white"/>
                    <Text style={styles.loadingTitle}>請(qǐng)稍后...</Text>
                </View>
            </View>
        )
    }
}

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:

 導(dǎo)入：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動(dòng)畫的地方調(diào)用：

LoadingUtil.showLoading();

在需要隱藏loading動(dòng)畫的地方調(diào)用：

LoadingUtil.dismissLoading();