React Native:如何有选择地启用LayoutAnimation
React Native:如何有选择地启用LayoutAnimation
提问于 2016-10-24 23:48:39
我想为一些组件启用布局动画，但是一旦它被激活，所有渲染的组件都会受到布局动画的影响。例如，我有
<container>
<waterfall/>
<menu/>
</container>我只希望对组件菜单使用布局动画，但是动画应用于瀑布渲染，它已经有了自己的动画代码。
使用原生react可以做到这一点吗？
回答 3
Stack Overflow用户
发布于 2016-11-25 09:14:38
解释
在容器组件中，使用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})
}
},Stack Overflow用户
发布于 2016-11-25 10:55:44
如果上面的解决方案不起作用，试着将它从LayoutAnimation更改为动画，这一个可以让你对动画有更多的控制。
Stack Overflow用户
发布于 2019-11-09 20:37:18
您可以选中react-native-reanimated过渡https://github.com/kmagiera/react-native-reanimated#transitions-
它的工作原理与LayoutAnimations类似，但对动画的执行方式提供了更多的控制
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40222515
复制相关文章
相似问题
腾讯云开发者
