layout - react 原生 : How to selectively enable LayoutAnimation

Question

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

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

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

这可能与 native react 吗？

Answer 1

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

解释

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

在菜单组件中，检查该变量是否已更新为您期望的值。如果有，请调用 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})
    }
  },