【问题标题】:Should I explicitly stop React Native animations on unmount?我应该在卸载时明确停止 React Native 动画吗?
【发布时间】:2023-03-16 05:40:01
【问题描述】:
假设我正在使用Animated.timing().start() 开始动画,确切时间(在挂载上或在某些外部事件上)并不重要。然后我使用Animated.View 来渲染动画。
假设它在组件卸载之前没有完成。
我应该在卸载时显式调用动画(实际上是所有仍在运行的动画)上的stop(),还是会隐式清理它?大多数手动分配的资源不会被隐式释放(除非它们被附加到组件上,比如钩子),但看起来像动画一样。
【问题讨论】:
标签:
react-native
react-animated
【解决方案1】:
我没有找到任何关于此的文档,但我查看了我们正在使用的版本 (0.59.8) 的代码。
简短的回答是否,不需要显式停止动画,它由 React Native 管理。
长答案遵循我下面的代码分析。
当您为某个值启动动画时,该动画将绑定到 Animated.Value。 (_animation,或_tracking。)
当您在Animated.Component 上使用Animated.Value 时,该值将作为_propsAnimated 附加到组件。
-
在 componentWillUnmount _propsAnimated 上是 __detached,__detach 在 Animated.Value 上通过调用 Animated.Value.prototype.stopAnimation(这是 Animated.Value 的公共函数)停止动画。
【解决方案2】:
好问题。我的拙见是 - 不。正如您可能读到的react-native docs,没有提到您应该这样做以及何时应该这样做。
如文档所述:
通过在动画上调用 start() 来启动动画。开始()
接受一个完成回调,将在动画完成时调用
完毕。如果动画正常运行结束,则完成
将使用 {finished: true} 调用回调。如果动画是
完成是因为在它完成之前调用了 stop() (例如
因为它被一个手势或其他动画打断了),那么它
将收到 {finished: false}。
由此,我会说当组件被卸载时,动画被中断。就个人而言,我没有在我的应用程序中使用stop(),也从未因此而面临内存泄漏。如果您尝试在start() 回调函数中更改组件状态,则可能会出现问题。这就是回调函数的finished 属性发挥作用的地方。额外参考here。