react-native原生loading动画组件

react-native原生loading动画组件

代码比较简单，有这方面需求的小伙伴可以copy随时使用；

使用

源码

import React, { Component } from 'react';
import { StyleSheet, Text, View, Modal, Animated, Easing, Dimensions, findNodeHandle } from 'react-native';

let width = Dimensions.get('window').width;//获取设备的宽高
let height = Dimensions.get('window').height;
export default class Loader extends Component {
    static navigationOptions = {
        header: null
    }
    constructor(props) {
        super(props);
        this.state = {
            rotateValue1: new Animated.Value(0),
            rotateValue2: new Animated.Value(0),
            rotateValue3: new Animated.Value(0),
            rotateValue4: new Animated.Value(0),
            rotateValue5: new Animated.Value(0),
            rotateValue6: new Animated.Value(0),
            rotateValue7: new Animated.Value(0),
            rotateValue8: new Animated.Value(0),
            fadeAnim1: new Animated.Value(1),
            fadeAnim2: new Animated.Value(1),
            fadeAnim3: new Animated.Value(1),
            fadeAnim4: new Animated.Value(1),
            fadeAnim5: new Animated.Value(1),
            fadeAnim6: new Animated.Value(1),
            fadeAnim7: new Animated.Value(1),
            fadeAnim8: new Animated.Value(1),
            viewRef: null
        }
    }
 componentDidMount() {
        this.startAnimation();
    }

    startAnimation() {
        this.state.rotateValue1.setValue(0);
        this.state.rotateValue2.setValue(0);
        this.state.rotateValue3.setValue(0);
        this.state.rotateValue4.setValue(0);
        this.state.rotateValue5.setValue(0);
        this.state.rotateValue6.setValue(0);
        this.state.rotateValue7.setValue(0);
        this.state.rotateValue8.setValue(0);
        this.state.fadeAnim1.setValue(1);
        this.state.fadeAnim2.setValue(1);
        this.state.fadeAnim3.setValue(1);
        this.state.fadeAnim4.setValue(1);
        this.state.fadeAnim5.setValue(1);
        this.state.fadeAnim6.setValue(1);
        this.state.fadeAnim7.setValue(1);
        this.state.fadeAnim8.setValue(1);
        let rotateValue = [
            { rotate: this.state.rotateValue1, fade: this.state.fadeAnim1 },
            { rotate: this.state.rotateValue2, fade: this.state.fadeAnim2 },
            { rotate: this.state.rotateValue3, fade: this.state.fadeAnim3 },
            { rotate: this.state.rotateValue4, fade: this.state.fadeAnim4 },
            { rotate: this.state.rotateValue5, fade: this.state.fadeAnim5 },
            { rotate: this.state.rotateValue6, fade: this.state.fadeAnim6 },
            { rotate: this.state.rotateValue7, fade: this.state.fadeAnim7 },
            { rotate: this.state.rotateValue8, fade: this.state.fadeAnim8 },
        ];
        let times = [1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
        let ratateValues = rotateValue.map(
            (item, i) => Animated.timing(item.rotate, {
                toValue: 1,
                duration: times[i],
                easing: Easing.in(Easing.quad),
            })
        );
        let fadeAnims = rotateValue.map(
            (item, i) => Animated.timing(item.fade, {
                toValue: 0,
                duration: times[i],
                easing: Easing.in(Easing.quad),
            })
        );
let parallelArr = fadeAnims.concat(ratateValues);
        Animated.parallel(parallelArr).start(() => {
            setTimeout(() => this.startAnimation(), 500)
        });
    }

    imageLoaded() {
        console.log(findNodeHandle(this.backgroundImage))
        this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
    }
    showComponents() {
        let Components = [
            { rotate: this.state.rotateValue1, fade: this.state.fadeAnim1 },
            { rotate: this.state.rotateValue2, fade: this.state.fadeAnim2 },
            { rotate: this.state.rotateValue3, fade: this.state.fadeAnim3 },
            { rotate: this.state.rotateValue4, fade: this.state.fadeAnim4 },
            { rotate: this.state.rotateValue5, fade: this.state.fadeAnim5 },
            { rotate: this.state.rotateValue6, fade: this.state.fadeAnim6 },
            { rotate: this.state.rotateValue7, fade: this.state.fadeAnim7 },
            { rotate: this.state.rotateValue8, fade: this.state.fadeAnim8 },
        ];
        return Components.map((item, i) => (
            
                
            
        ))
    }
render() {
        const visible = this.props.visible;
        return (
             console.log('onRequestClose...')}
            >
                
                    
                        {this.showComponents()}
                        loading...
                    
                

            

        );
    }

}



const styles = StyleSheet.create({
    container: {
        width: width,
        height: height,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.2)',
    },
    loader: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        width: 120,
        height: 120,
        borderRadius: 10,
        backgroundColor: 'rgba(0,0,0,0.6)',
    },
    dot: {
        width: 6,
        height: 6,
        position: 'absolute',
        top: 0,
        left: 24,
        backgroundColor: '#FFF',
        borderRadius: 10,
    },
    loaderText: {
        color: '#FFF',
        marginTop: 50,
    }
});