React native 反应本机：组件卸载时的动画

我有一个自定义模式，它在

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状态更改，然后通过

componentwillreceiveprops（）

调用函数，如下所示：

componentWillReceiveProps (nextProps) {

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

}

然而，这让人感觉非常刻薄和迫切

---

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

组件将接收道具

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

我不会在动画完成后使用

InteractionManager.runAfterInteractions

执行。我建议使用

start

回调

Animated.timing（this.animatedValue，{}）.start（（）=>this.props.closeModal（））

有些东西可以帮助你协调深层动画和火力备份。这利用了

上下文

您也可以像您尝试过的那样使用redux，但是我会使用

componentDidUpdate

而不是

componentWillReceiveProps

原因是，只有在组件中设置一个

setState

才是安全的，您的

组件将在其中接收道具

如果触发
组件内部的
调度
将接收道具
则会导致其他组件中的
设置状态
导致应用程序中断

总的来说：我推荐这个流程。（Close Action Initiated）=>Animate Modal Closed=>在
start（（）=>{}）中进行
回调，导致
setState
或在
redux
存储中设置一段数据，该数据将
卸载现在隐藏的模式

这样可以获得卸载动画

如果您使用像
react导航这样的路由，我建议设置
模式：“模态”
导航样式。这样，卸载/装载模态动画就可以为您解决问题。
这方面有什么更新吗？我现在也处于同样的情况。如果没有更新，可以进一步扩展代码解释，因为我不明白InteractionManager是什么，等等：我这边没有更新。交互管理器将在动画完成后首先执行回调。您通常会将昂贵的同步任务放在回调中。如果您同时执行动画和昂贵的任务，动画将变得僵硬。（除非使用react native最新版本中发布的动画的本机驱动程序，该驱动程序将在单独的线程上执行动画）。更多信息请参见：您是否在项目中使用
Navigator
？这就是我们在进入/退出视图上制作动画（在过渡中）的方法。