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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值