Reactコンポーネントがアンマウントするときのネイティブキャンセルアニメーションの遅延

Question

アニメーションに少し問題があります。私はエラーのために私のアプリでFlash Bar Infoをやろうとします。私は新しいコンポーネントを作成するために、このコンポーネントを特定のビューに配置するかどうかを指定することができます。エラーが発生した場合、コンポーネントの状態はcomponentWillReceivePropsで変更され、エラーメッセージ。

ので、エラーメッセージがない場合、関数はfalseを返すレンダリングが、私は実行して、エラーメッセージがある場合は、私のこのアニメーションコードと機能をレンダリング、私：私は私の見解に滞在する場合

// Ease in ease out anitmation 
Animated.sequence([ 
    Animated.timing(this.state.translateY, { 
    toValue: 40, 
    easing: Easing.bounce, // Like a ball 
    duration: 450, 
    }), 
    Animated.delay(3000), 
    Animated.timing(this.state.translateY, { 
    toValue: 0, 
    duration: 300, 
    }), 
]).start(() => { 
    this.props.clearMessage(); 
    this.setState({ visible: false }); // <-- Problem is here 
}); 

アニメーションの遅延の間、それは正常に動作しますが、メッセージが可視に設定されているときに前のビューに移動すると、コンポーネントがマウントされていないときには関数setStateが呼び出されます。 だから私はこのワーリングを得た：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component. 

コンポーネントは、この時点でマウントされていないので、それは正常な動作です。 コンポーネントをアンマウントするときにアニメーションシーケンスをキャンセルする方法を見つけようとします。私の研究の間に

私はコンポーネントがアンマウントされますときclearTimeoutとsetTimeout()機能を使用して、一時的な方法を見つけるが、私はAnimated.sequenceでAnimated.delay機能でそれを行う方法を見つけることができない、それは可能ですか？

事前にお返事ありがとうございます。

TLDR;

コンポーネントをアンマウントするときにアニメーションの遅延をキャンセルすることはできますか？

Answer 1

Animated.start()に与えた関数は、アニメーションが正常終了したかどうかを宣言するオブジェクトで呼び出されます。 React-Nativeは、コンポーネントがアンマウントされている場合、暗黙的にアニメーションをキャンセルします。したがって、コールバックでfinishedのプロパティを確認し、アニメーションが最後まで実行された場合はsetStateのみを確認してください。

だから、これは動作するはずです：

... 

]).start((done) => { 
    if (done.finished) { 
    this.props.clearMessage(); 
    this.setState({ visible: false }); 
    } 
}); 

（手動アニメーションを停止した場合、例えばAnimated.stop()または同じAnimated.Valueで別のアニメーションを開始することによりを使用して、finished -propertyも、その後falseになることに注意してください。）

参照：https://facebook.github.io/react-native/docs/animated.html#working-with-animations