reactnative loading

1.组件 LoadingUnitl.js

let LoadingUtil = {
    showLoading(timeOut = 10000) {
        this.startShowLoading();
        this.timerLoading = setTimeout(() => {
            this.dismissLoading();
        }, timeOut);
    },
    /**
     * 延迟500ms显示loading动画
     * @param delay 延迟ms数
     */
    showLoadingDelay(delay = 500) {
        this.timerLoading && clearTimeout(this.timerLoading);
        this.dissTimer && clearTimeout(this.dissTimer);
        this.timerLoading = setTimeout(() => {
            this.startShowLoading();
        }, delay);
        this.dissTimer = setTimeout(() => {
            this.dismissLoading();
        }, 60000);
    },
    startShowLoading() {
        global.mLoadingComponentRef && global.mLoadingComponentRef.showLoading();
    },
    dismissLoading() {
        global.mLoadingComponentRef && global.mLoadingComponentRef.dismissLoading();
        this.timerLoading && clearTimeout(this.timerLoading);
        this.dissTimer && clearTimeout(this.dissTimer);
    },
};

export default LoadingUtil;

loadingView.js

import React from "react";
import {ActivityIndicator, Dimensions, StyleSheet, Text, View} from "react-native";
import {sizePx} from "../utils/ScreenUtil";

const {width, height} = Dimensions.get("screen");

export default class LoadingView extends React.Component {
    constructor(props) {
        super(props);
        this.minShowingTime = 200;
        this.state = {
            // fadeAnim: new Animated.Value(0),
            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);
    };

    _doJump = () => {
        // this.state.fadeAnim.setValue(0);
        // this.animate = Animated.timing(
        //     this.state.fadeAnim,
        //     {
        //         toValue: 1,
        //         duration: 2000,
        //     }
        // ).start(this._doJump);
    };

    componentWillMount() {
        this._doJump();
    }

    componentWillUnmount() {
        if (this.animate) {
            this.animate.stop();
        }
    }

    render() {
        if (!this.state.isLoading) {
            return null;
        }
        return (
            <View style={styles.containerStyle}>
                <View style={[styles.loading]}>
                    {/*<Animated.Image source={icon.logo}*/}
                                    {/*style={[styles.logoStyle,*/}
                                        {/*{*/}
                                            {/*transform: [*/}
                                                {/*{*/}
                                                    {/*rotateY: this.state.fadeAnim.interpolate({*/}
                                                        {/*inputRange: [0, 1],*/}
                                                        {/*outputRange: ['0deg', '360deg']*/}
                                                    {/*})*/}
                                                {/*}]*/}
                                        {/*}]}/>*/}
                    <ActivityIndicator color="#3478F6" size={"large"}/>
                    {/*<Text style={styles.loadingTitle}>加载中...</Text>*/}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        width: width,
        height: height,
        position: 'absolute',
        top: 0,
        left: 0,
        // backgroundColor: 'rgba(0,0,0,0)',
        flex: 1,
    },
    loading: {
        // backgroundColor: '#10101099',
        height: sizePx(200),
        width: sizePx(200),
        borderRadius: sizePx(8),
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: (height - sizePx(200)) / 2,
        left: (width - sizePx(200)) / 2,
    },

    logoStyle: {
        width: sizePx(63),
        height: sizePx(75),
        resizeMode: 'contain',
    },

    loadingTitle: {
        marginTop: sizePx(20),
        fontSize: sizePx(28),
        color: '#3478F6'
    }
});

2.使用

放在App.js 全局使用 也可某个页面单独添加

<LoadingView
                        ref={(ref) => {
                            global.mLoadingComponentRef = ref;
                        }}
                    />

LoadingUtil.showLoadingDelay(500);
LoadingUtil.dismissLoading();
LoadingUtil.startShowLoading();