旋转方块

import React from 'react';
import {
    View,
    Animated
} from 'react-native';

export default class RotationSquare extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            animatedValue: new Animated.Value(0)
        };
    }

    componentDidMount() {
        Animated.timing(this.state.animatedValue, {
            toValue:100,
            duration: 3000
        }).start();
    }

    render() {
        let interpolatedAnimation = this.state.animatedValue.interpolate({
            inputRange: [0, 100],
            outputRange: ['0deg', '360deg']
        });
        return (
            <View style={styles.container}>
                <Animated.View
                    style={[styles.box,
                        {transform: [
                            {rotate: interpolatedAnimation},
                            {translateY: this.state.animatedValue}
                        ]}]} />
            </View>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        // alignItems: 'center'
    },

    box: {
        width: 80,
        height: 80,
        backgroundColor: 'red',
        top: 100,
        left: 100,
    }
};