7

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

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

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

这可能与本机反应吗?

4

3 回答 3

3

我遇到了类似的问题,这是我解决它的方法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})
    }
  },
于 2016-11-25T01:14:37.980 回答
0

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

它的工作原理与 LayoutAnimations 类似,但可以更好地控制动画的执行方式

于 2019-11-09T12:37:18.383 回答
0

如果上面的解决方案不起作用,请尝试将其从 LayoutAnimation 更改为 Animated,这可以让您对动画有更多的控制。

于 2016-11-25T02:55:44.043 回答