React-Native 封装轻量级loading页面加载等待

先看效果

QQ20180831-162138-HD.gif

直接贴上代码

/**
 *Created by macping
 *Date:2018/8/28
 */

/**
 * 使用案例
 
 this.refs.cover && this.refs.cover.showCover();
 this.refs.cover && this.refs.cover.dismissCover();
 */

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    Modal,
    Animated,
    ImageBackground,
    Image,
    Easing,
    TouchableOpacity
} from 'react-native';

const imgWidth = (70 * 0.8);
const imgHeight = 110 * imgWidth / 70;

export default class PopLoading extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isShow: false,
            imgAnimated: new Animated.Value(0),
        }
    }

    /**
     * defineMethod
     */
    loadingImgAnimated = () => {
        this.state.imgAnimated.setValue(0);
        Animated.timing(this.state.imgAnimated, {
            toValue: imgWidth,
            duration: 2500,
            easing: Easing.linear
            // delay:200,
        }).start(() => {
            this.startTimer();
            // this.loadingImgAnimated();
        });
    }

    //显示
    dismissCover = () => {
        this.setState({
            isShow: false
        })
        this.stopImgAnimated();
    }

    //消失
    showCover = () => {
        this.setState({
            isShow: true,
        })
        this.startTimer();
    }

    // 为了可关闭动画，使用定时器更容易管理
    startTimer = () => {
        this.stopImgAnimated();
        this.timer = setTimeout(() => {
            this.loadingImgAnimated();
        }, 200);
    }

    // 重置动画
    stopImgAnimated = () => {
        this.state.imgAnimated.setValue(0);
        this.state.imgAnimated.stopAnimation();
        this.timer && clearTimeout(this.timer);
    }

    /**
     * render
     */
    render() {
        if (!this.state.isShow) {
            return null;
        } else {
            return (
                 {
                        //关闭
                    }}
                >
                    {this.renderCover()}
                
            )
        }
    }

    //蒙版背景
    renderCover() {
        return (
             {
                }}
            >
                
                    
                        
                    
                
            
        )
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    bgImg: {
        width: imgWidth,
        height: imgHeight,
    }

});