Question

我对动画有点问题。我尝试在我的应用上为错误做一个Flash栏信息。所以为了做到这一点，我创建了一个新组件，这个组件可以放在一个特定的视图中，当从我的商店触发错误时，我的组件的状态改变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.

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

在我的研究过程中，我发现在组件卸载时使用setTimeout()函数与clearTimeout的临时方法，但我无法通过Animated.delay函数找到如何执行此操作在Animated.sequence，是否可能？

提前感谢您的回答！

TLDR;

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

Answer 1

使用一个对象来调用您为fillJug(list,i,cap - list[i], newtemp);提供的函数，该对象声明动画是否成功运行到最后。如果卸载组件，React-Native也会隐式取消动画。因此，请检查回调中的Animated.start() - 属性，如果动画结束，则只检查finished。

所以这应该有效：

setState

（请注意，如果手动停止动画，使用例如... ]).start((done) => { if (done.finished) { this.props.clearMessage(); this.setState({ visible: false }); } });或启动具有相同Animated.stop()的其他动画，则Animated.Value - 属性也将为{{1} }。）

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

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

1 个答案: