React本机取消动画延迟当组件将卸载

我有一个小动画的问题。我尝试在我的应用上为错误做一个Flash Bar Info。为此，我创建了一个新组件，这个组件可以放置在一个特定的视图中，当错误从我的商店触发时，我的组件的状态由componentWillReceiveProps更改，并设置为可见，如果有错误消息。React本机取消动画延迟当组件将卸载

因此，如果没有一个错误消息我渲染函数返回值为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.

这是一种正常的行为，因为该组件没有被安装在这一点上。所以，我试图找到一种方法来取消我的动画序列，当组件将卸载。

在我的研究，我发现通过使用clearTimeoutsetTimeout()功能时，该组件将卸载暂时的方式，但我无法找到如何做到这一点与Animated.delay功能在Animated.sequence，这可能吗？

提前感谢您的答案！

TLDR;

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

来源

2016-03-21 Jérémy Magrin

该文档提'stopAnimation'方法。你有没有试过看它？它是[这里]（https://facebook.github.io/react-native/docs/animated.html#stopanimation）。 –

感谢Hamaide，但是，我也尝试过，但是'Animated.sequence'没有找到函数'stopAnimation'。 –

您给Animated.start()的函数被调用时声明动画是否成功运行到结束。如果组件被卸载，React-Native也会隐式取消动画。因此，请在回调中检查finished -property，如果动画结束，请仅检查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

来源

2017-10-04 10:28:22 mtkopone

React本机取消动画延迟当组件将卸载

回答

相关问题