为什么此Animated.View没有动画？

Question

我正在尝试设置Animated.View的宽度的Animated.View 。

这是组件的constructor ：

constructor(props) {
    super(props);

    this.barWidth = new Animated.Value(0);
    this.barWidthInterpolate = this.barWidth.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 100]
    });
    this.barWidthToValue = 1;
}

这是componentDidMount钩子：

componentDidMount() {
    Animated.timing(
        this.barWidth,
        {
            useNativeDriver: true,
            toValue: this.barWidthToValue,
            easing: Easing.in(Easing.ease),
            duration: 2000,
        }
    ).start();
}

这是render方法：

render() {
    let colorObj = {
        "green": [ "#9CFFD5", "#00CC76" ],
        "blue": [ "#B0D0FF", "#0066FF" ],
        "red": [ "#FF9C9C", "#FF0000" ]
    };

    let borderRadius = 5;

    console.log(this.barWidth._value);

    return (
        <View style={{ width: "100%", height: 30 }}>
            <Animated.View style={{ width: this.barWidthInterpolate, height: "100%" }}>
                { /* Linear gradient from react-native-linear-gradient */ }
                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={colorObj[this.props.color]} style={{ maxWidth: "100%", minWidth: "100%", height: "100%", borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }}/>
            </Animated.View>
        </View>
    );
}

组件没有进行动画处理，而是跳到了最后一个值。

请帮忙，我真的不知道该怎么办。 非常感谢。