Question

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

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

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

这可能是本地的反应吗？

Answer 1

我遇到了类似的问题，这是我用layoutanimation：

解决的问题

说明

将容器组件中的状态变量保存为菜单：<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})
    }
  },

Answer 2

如果上述解决方案不起作用，请尝试将其从LayoutAnimation更改为Animated，这样您就可以对动画进行更多控制。

Answer 3

您可以检查本机复活的过渡https://github.com/kmagiera/react-native-reanimated#transitions-

它与LayoutAnimations的工作原理类似，但是可以更好地控制动画的效果

React Native：如何有选择地启用LayoutAnimation

3 个答案:

说明

代码概述

容器组件

菜单组件