当组件将卸载时，React Native取消动画延迟 [英] React Native cancel animation delay when component will unmount

问题描述

我对动画有点问题。我尝试在我的应用程序上执行Flash Bar Info以获取错误。为此，我创建了一个新组件，可以将该组件放置在一个特定的视图中，也可以不放置在一个特定的视图中，并且当错误从我的商店触发时，该组件的状态将由 componentWillReceiveProps 并在出现错误消息时将其设置为可见。

I've a little problem with an animation. I try to do a Flash Bar Info on my app for the errors. So to do that I create a new component, this component can be place in one specific view or not, and when the error is trigger from my store the state of my component is change by componentWillReceiveProps and set to visible if there is an error message.

因此，如果没有错误消息，我的渲染函数将返回false值，但如果存在错误消息，错误消息，我使用以下动画代码运行渲染功能：

So, if there isn't an error message my render function return false value but if there is an error message I run my render function with this animation code:

// 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 。
所以我得到了警告：

If I stay on my view during the animation delay, that's work perfectly, but if I go to my previous view when the message is set to visible, the function setState is called when my component is not mounted. So I got this waring:

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.

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

It's a normal behavior because the component is not mounted at this point. So, I try to find a way to cancel my animation sequence when the component will unmount.

在研究过程中，我找到了使用<$的临时方法。 c $ c> setTimeout（）函数与 clearTimeout 何时将组件卸载，但我找不到如何使用<$ c做到这一点 Animated.sequence 中的$ c> Animated.delay 函数，有可能吗？

During my research I find a temporary way by using setTimeout() function with clearTimeout when the component will unmount, but I can't find how to do that with Animated.delay function in an Animated.sequence, is it possible ?

预先感谢您的回答！

TLDR;

可以取消动画延迟何时卸载组件？

It is possible to cancel an animation delay when component will unmount ?

推荐答案

您赋予 Animated.start（）与一个对象一起调用，该对象声明动画是否成功运行到结尾。如果组件已卸载，React-Native也会隐式取消动画。因此，请检查回调中完成的属性，如果动画播放到最后，则仅检查 setState 。

The function you give to Animated.start() is called with an object declaring whether the animation ran to the end successfully. React-Native also implicitly cancels your animation if the component is unmounted. So check for the finished-property in your callback, and only setState if the animation ran to the end.

所以这应该起作用：

...

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

（请注意，如果您手动停止动画，请使用例如 Animated.stop （）或通过使用相同的 Animated.Value 开始另一个动画，完成-属性也将是 false 。）

(Note that if you manually stop the animation, using e.g. Animated.stop() or by starting another animation with the same Animated.Value, the finished-property will also then be false.)

请参阅： https://facebook.github.io/react-native/docs/animated.html#working-with-动画

这篇关于当组件将卸载时，React Native取消动画延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！