反应原生动画

Question

我希望图像的宽度从0-100％增加

所以我

this.state = {
            width: new Animated.Value(10)
        }


componentDidMount(){
   Animated.timing(this.state.width, {
            toValue: new Animated.Value(200),
            duration: 200,
        }).start();
    }
render(){
        <View style={Styles.container}>
           <Animated.View style={[{backgroundColor:'#000'},{width:this.state.width}]}>
             <Image
                center
                style={Styles.image}
                source={require("./../images/homeScreen3.png")}
            />
           </Animated.View>
   .....
 }

但是图像宽度仍然为10。有关如何完成此任务的任何建议

Answer 1

在Animated.timing中，toValue属性接收一个整数。 您只需要执行以下操作：

Animated.timing(this.state.width, {
    toValue: 200,
    duration: 200,
}).start();