如何在组件 属性 更改时激活 LayoutAnimation?
How should LayoutAnimation be activated on component property change?
React Native LayoutAnimation 允许在下一个布局发生时自动将视图设置为新位置的动画。
我将项目存储在 Redux 中,这些项目作为属性传递到呈现它们的组件中。当属性更改时,我希望组件内容相应地设置动画。但是,我不确定在组件中的哪个位置调用 LayoutAnimation.configureNext()
.
componentWillUpdate
方法似乎是正确的地方,因为它在渲染之前被调用,但该方法是 deprecated and going to be removed。 componentDidUpdate
太晚了,因为 render/layout 已经发生了。
我通过将属性复制到组件状态并在 componentDidUpdate
中调用 LayoutAnimation.configureNext()
使其工作,这会强制使用动画进行第二次重新渲染。这可能有一个额外的好处,即在某种程度上将此组件的更新与可能有其他组件更新的先前渲染周期隔离开来,但这似乎很麻烦。
应该在生命周期方法的什么地方调用 LayoutAnimation.configureNext()
?
事实证明,在 componentDidUpdate
或 useEffect
中调用 LayoutAnimation.configureNext()
确实会在属性更改时产生动画。虽然这些方法是在 render()
之后调用的,但它们显然是在屏幕上的实际布局和渲染之前调用的。
我找不到任何关于 callback/layout/render 生命周期的文档来分隔这些阶段,但根据经验它是有效的。
React Native LayoutAnimation 允许在下一个布局发生时自动将视图设置为新位置的动画。
我将项目存储在 Redux 中,这些项目作为属性传递到呈现它们的组件中。当属性更改时,我希望组件内容相应地设置动画。但是,我不确定在组件中的哪个位置调用 LayoutAnimation.configureNext()
.
componentWillUpdate
方法似乎是正确的地方,因为它在渲染之前被调用,但该方法是 deprecated and going to be removed。 componentDidUpdate
太晚了,因为 render/layout 已经发生了。
我通过将属性复制到组件状态并在 componentDidUpdate
中调用 LayoutAnimation.configureNext()
使其工作,这会强制使用动画进行第二次重新渲染。这可能有一个额外的好处,即在某种程度上将此组件的更新与可能有其他组件更新的先前渲染周期隔离开来,但这似乎很麻烦。
应该在生命周期方法的什么地方调用 LayoutAnimation.configureNext()
?
事实证明,在 componentDidUpdate
或 useEffect
中调用 LayoutAnimation.configureNext()
确实会在属性更改时产生动画。虽然这些方法是在 render()
之后调用的,但它们显然是在屏幕上的实际布局和渲染之前调用的。
我找不到任何关于 callback/layout/render 生命周期的文档来分隔这些阶段,但根据经验它是有效的。