首页 > 解决方案 > 如何在组件属性更改时激活 LayoutAnimation?

问题描述

React Native LayoutAnimation允许在下一个布局发生时自动将视图动画到新位置。

我有存储在 Redux 中的项目,这些项目作为属性传递到呈现它们的组件中。当属性更改时,我希望组件内容相应地进行动画处理。但是,我不确定要在组件中的哪个位置调用LayoutAnimation.configureNext().

componentWillUpdate方法似乎是在渲染之前调用的正确位置,但该方法已弃用并将被删除componentDidUpdate为时已晚,因为渲染/布局已经发生。

我通过将属性复制到组件状态并调用LayoutAnimation.configureNext()in来使其工作componentDidUpdate,这会强制使用动画进行第二次重新渲染。这可能具有额外的好处,即在某种程度上将此组件的更新与可能有其他组件更新的前一个渲染周期隔离开来,但这似乎很麻烦。

应该在生命周期中的什么地方LayoutAnimation.configureNext()调用方法?

标签: react-nativeanimationlayout-animation

解决方案


结果是在属性更改时调用LayoutAnimation.configureNext()或 确实产生动画componentDidUpdateuseEffect虽然这些方法是在 after 调用render()的,但它们显然是在实际布局和屏幕渲染之前调用的。

我找不到任何关于回调/布局/渲染生命周期的文档来分隔这些阶段,但凭经验它是有效的。


推荐阅读