react-native原生loading動畫組件

react-native原生loading動畫組件

代碼比較簡單，有這方面需求的小夥伴能夠copy隨時使用；

使用

<Loader visible={this.state.loaderVisible} />

源碼

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) => (
            <Animated.View
                key={i}
                style={{
                    width: 40,
                    height: 40,
                    top: '50%',
                    left: '50%',
                    marginTop: -40,
                    marginLeft: -25,
                    position: 'absolute',
                    marginBottom: 20,
                    opacity: item.fade,
                    transform: [
                        {
                            rotateZ: item.rotate.interpolate({
                                inputRange: [0, 1],
                                outputRange: ['-220deg', '180deg']
                            })
                        }
                    ]
                }}>
                <View style={styles.dot} />
            </Animated.View>
        ))
    }
render() {
        const visible = this.props.visible;
        return (
            <Modal
                visible={visible}
                animationType="fade"
                transparent={true}
            // onRequestClose={() => console.log('onRequestClose...')}
            >
                <View style={styles.container}>
                    <Animated.View style={styles.loader} >
                        {this.showComponents()}
                        <Text style={styles.loaderText}>loading...</Text>
                    </Animated.View>
                </View>

            </Modal>

        );
    }

}



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,
    }
});