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

Posted 2023-03-15

【中文标题】React Native：如何选择性地启用 LayoutAnimation

【英文标题】：React Native: How to selectively enable LayoutAnimation

【发布时间】：2016-10-24 15:48:39

【问题描述】：

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

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

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

React Native 可以做到这一点吗？

【参考方案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)
    
  ,

【参考方案2】：

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

【讨论】：

更多细节会有所帮助。如果您谈论将 LayoutAnimation 替换为 Animated 或使用 Animated.View。如果可能的话，例子对你来说会很棒

【参考方案3】：

你可以查看 react-native-reanimated Transitions https://github.com/kmagiera/react-native-reanimated#transitions-

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