React Native：组件卸载时的动画答案

【问题标题】：React Native: Animation when component unmountsReact Native：组件卸载时的动画
【发布时间】：2016-05-06 17:59:27
【问题描述】：

我有一个自定义模式，它在componentDidMount 上滑动：

componentDidMount() {

    Animated.timing(this._animatedValue.y, {
        duration: 200,
        toValue: 0
    }).start()

}

好的，这很简单。但是，我也喜欢在组件卸载时将模态滑出。对我来说，componentWillUnmount() 感觉不错，因为它是一种优雅的声明方式：

componentWillUnmount() {

    Animated.timing(this._animatedValue.y, {
        duration: 200,
        toValue: deviceHeight
    }).start()

}

但这当然不会起作用，因为 React 不会等到我完成我的动画。

所以目前我使用自定义函数来解决这个问题：

closeModal() {


    Animated.timing(this._animatedValue.y, {
        duration: C.filterModalDuration,
        toValue: deviceHeight
    }).start()

   InteractionManager.runAfterInteractions(() => {
     this.props.UnmountThisComponent()
   })

}

这当然不那么优雅，但它确实有效。但是，如果我需要从组件树中很远的组件调用此函数，痛苦就开始了，即我需要通过onUnmount={()=> closeModal()} 手动传递此函数，然后一遍又一遍地使用onUnmount={this.props.onUnmount}...

然后我想我可以用 redux & redux-connect 解决这个问题。我正在考虑从子组件触发 redux 状态更改，然后通过componentWillRecieveProps() 调用该函数，如下所示：

componentWillReceiveProps (nextProps) {

  if (nextProps.closeFilter === true) {
          this.closeModal()
  }

}

但是，这感觉非常 hacky 和必要。

有没有什么方法可以优雅/声明式地解决这个问题？

【问题讨论】：

这有什么更新吗？我现在也处于同样的情况。如果没有更新可以进一步扩展您的代码解释，因为我不明白这个 InteractionManager 等：D
我这边没有更新。动画完成后，交互管理器将首先执行回调。您通常会将昂贵的同步任务放在该回调中。如果你同时执行动画和昂贵的任务，动画会很卡。（除非您使用在最近版本的 react native 中发布的动画原生驱动程序，它将在单独的线程上执行动画）。在此处查看更多信息：facebook.github.io/react-native/docs/interactionmanager.html
您在项目中使用Navigator 吗？这就是我们在进入/退出视图上制作动画（在过渡中）的方式。

标签： react-native redux

【解决方案1】：

我不会在动画完成后使用InteractionManager.runAfterInteractions 来执行。我建议使用start 回调。

Animated.timing(this.animatedValue, {}).start(() => this.props.closeModal())

https://github.com/mosesoak/react-native-conductor 之类的东西可以帮助您协调深度动画并重新启动。这利用了context。

您也可以像尝试过的那样使用 redux，但我会使用 componentDidUpdate 而不是 componentWillReceiveProps。

原因是只有在您拥有componentWillReceiveProps 的组件中引起setState 才是安全的。

如果您在componentWillReceiveProps 内部触发dispatch，它将导致其他组件中的setState 导致您的应用程序中断。

总的来说：我会推荐这个流程。（已启动关闭操作）=> Animate Modal Closed => 在start(() => {}) 回调中导致setState 或在您的redux 存储中设置一条数据，然后unmount 您现在隐藏的模式。

这样你就得到了卸载动画。

如果您使用react-navigation 之类的路由，我建议设置mode: "modal" 导航样式。这样，卸载/安装模态动画就会为您处理好。

【讨论】：

【解决方案2】：

componentWillReceiveProps 似乎非常适合，因为它的目的是根据下一个道具进行操作。当父母想要触发他们的孩子的动作时，这是理想的（即使这并不是真正的 React 模式，孩子调用父母函数，父母从孩子那里接收事件）。

【讨论】：