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

发布时间：2020-12-15 16:16:35 所属栏目：百科来源：网络整理

导读：我想为某些组件启用布局动画,但一旦激活,所有渲染的组件都会受到布局动画的影响.例如,我有 container waterfall/ menu//container 我只希望为组件菜单使用布局动画,但动画应用于瀑布渲染,瀑布渲染已经有自己的动画代码. 这可能与本地的反应吗？解决方法我

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

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

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

这可能与本地的反应吗？

解决方法

我遇到了类似的问题,这是我用layoutanimation解决它的方法：

说明

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!