变色

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

export default class ColorSquare 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 interpolatedColor = this.state.animatedValue.interpolate({
            inputRange: [0, 100],
            outputRange: ['rgba(255, 255, 255, 1)', 'rgba(51, 156, 177, 1)']
        });

        return (
            <View style={styles.container}>
                <Animated.View style={[styles.box, {backgroundColor: interpolatedColor}]} />
            </View>
        );
    }
};

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

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