ネイティブアニメーション反復無限大に反応

Question

私は以下のアニメーションを持っています。

componentWillMount(){ 
    this.animatedValue = new Animated.Value(300); 
    } 

    componentDidMount(){ 
    Animated.timing(this.animatedValue , { 
     toValue: -100, 
     duration: 3000, 

    }).start(); 
    } 

    render() { 
    const animatedStyle = { marginLeft: this.animatedValue, marginRight: - this.animatedValue }; 

    return (
     <View style={{flexDirection: 'row', height: 100,}}> 
     <Animated.View style={[ animatedStyle,{backgroundColor: 'blue', width:100}]} /> 
     </View> 
    ); 
    } 

私は無限の時間を繰り返したいと思います。誰でも何か提案がありますか？

Answer 1

Animated.start()にコールバックを渡して、アニメーション値をリセットし、再度アニメーションを開始します。例：

componentDidMount(){ 
    this.runAnimation(); 
} 

runAnimation() { 
    this.animatedValue.setValue(300); 
    Animated.timing(this.animatedValue, { 
    toValue: -100, 
    duration: 3000, 
    }).start(() => this.runAnimation()); 
} 

いつでもアニメーションを停止する必要がある場合は、this question/answerをご覧ください。