animation - 当组件卸载时，React Native 取消动画延迟

Question

我在动画方面遇到了一些问题。我尝试在我的应用程序上执行 Flash Bar Info 以查找错误。因此，为了做到这一点，我创建了一个新组件，该组件可以放置在一个特定 View 中，也可以不放置在一个特定 View 中，当从我的商店触发错误时，我的组件的状态将由 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
});

如果我在动画延迟期间停留在 View 上，那就可以完美地工作，但是如果我在消息设置为可见时转到上一个 View ，则当我的组件启动时，将调用函数 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.

这是正常行为，因为此时组件尚未安装。因此，我尝试找到一种方法来在组件卸载时取消动画序列。

在我的研究过程中，我找到了一种临时方法，当组件卸载时，将 setTimeout() 函数与 clearTimeout 一起使用，但我找不到如何做到这一点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 - 属性也将为 false。)

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