021.全局loading设置

• 创建AppLoading组件

import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { pTd, viewportWidth, viewportHeight } from '@/utils/index'
/**
 * 全局加载中控件，
 * 一般用于网络等异步加载
 */
class AppLoading extends PureComponent {
    state = {
        isLoading: false
    }
    showLoading = () => {
        this.setState({
            isLoading: true
        })
    };
    dismissLoading = () => {
        this.setState({
            isLoading: false
        })
    }
    render() {
        if (!this.state.isLoading) {
            return null;
        }
        return (
            <View style={{
                flex: 1,
                width: viewportWidth,
                height: viewportHeight + 45,
                position: 'absolute',
                backgroundColor: '#10101099',
            }}>
                <View style={styles.loading}>
                    <ActivityIndicator color="white" />
                    <Text style={styles.loadingTitle}>请稍后...</Text>
                </View>
            </View>
        );
    }
}


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

    loadingTitle: {
        marginTop: 10,
        fontSize: pTd(24),
        color: 'white'
    }
})

export default AppLoading;

• 入口文件全局配置

import React, { Component } from 'react'
import Navgator from '@/navigator/index'
import { Provider } from 'react-redux'
import store from '@/config/dva'
import { StatusBar } from 'react-native'

//全局loading
import AppLoading from '@/components/apploading'

import { enableScreens } from 'react-native-screens'
//优化性能
enableScreens()

class index extends Component {
    render() {
        return (
            <Provider store={store}>
                <Navgator />
                {/* "default" | "light-content" | "dark-content" 颜色控制 */}
                <StatusBar backgroundColor="transparent" barStyle='light-content' translucent />
                {
                    <AppLoading
                        ref={(ref) => {
                            // @ts-ignore
                            global.mLoadingComponentRef = ref;
                        }} />
                }
            </Provider>
        )
    }
}

export default index;

• 封装LoadingUtils

// @ts-nocheck
let LoadingUtil = {
    showLoading(timeOut = 0) {
        global.mLoadingComponentRef && global.mLoadingComponentRef.showLoading();
        if (timeOut > 0) {
            setTimeout(() => {
                this.dismissLoading();
            }, timeOut);
        }
    },
    dismissLoading() {
        global.mLoadingComponentRef && global.mLoadingComponentRef.dismissLoading();
    }
};


export default LoadingUtil;

• 使用

import LoadingUtil from '@/utils/loadingutil'

//显示
LoadingUtil.showLoading()
 
//隐藏
LoadingUtil.dismissLoading()