layout - react native : How to selectively enable LayoutAnimation

我想为某些组件启用布局动画，但是一旦激活它，正在渲染的所有组件都会受到布局动画的影响。例如，我有

<container>
  <waterfall/>
  <menu/>
</container>

我只希望对组件菜单使用布局动画，但是该动画将应用于已经具有自己的动画代码的瀑布渲染。

通过 native react 可能吗？

最佳答案

我遇到了类似的问题，这是我使用layoutanimation解决的方法:

解释

在容器组件中保留一个状态变量，该变量作为 Prop 传递给菜单:<menu reload={this.state.doSomethingInMenu}>
在容器组件中，使用setTimeout设置菜单变量，以便将控制权传递回DOM，并且更改将呈现(不带有动画)。在运行setTimeout之后，变量将更新并且菜单项将更改，从而导致重新加载。

在菜单组件中，检查该变量是否已更新为期望的值。如果有，请调用LayoutAnimation.configureNext。这将使下一个渲染(只是菜单更改)具有动画效果。

代码概述

容器组件

getInitialState: function() {
  return { doSomethingInMenu: false };
},

// Do something that causes the change
// Then call setTimeout to change the state variable
setTimeout(() => {
  this.setState({ doSomethingInMenu: true });
},750)

<menu reload={this.state.doSomethingInMenu} />

菜单组件

componentWillReceiveProps: function(nextProps) {
    if (nextProps.reload) {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      // Set the menu state variable that causes the update
      this.setState({field: value})
    }
  },