React Native:组件卸载时的动画

Question

我有一个自定义模式,可以滑入componentDidMount:

componentDidMount() {

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

} 

好的,这很简单.但是,我也喜欢在组件卸载时滑出模态.对我来说,componentWillUnmount()感觉是对的,因为这是一种优雅的陈述方式:

componentWillUnmount() {

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

} 

但这当然不工作,因为阵营犯规等到我已经完成我的动画.

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

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和必要.

有没有办法以优雅/声明的方式解决这个问题？

Answer 1

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

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

有些东西,比如https://github.com/mosesoak/react-native-conductor,它可以帮助你协调深度动画并重新启动.这利用了context.

您也可以尝试使用redux,但我会使用componentDidUpdate而不是componentWillReceiveProps.

原因是只有setState在您拥有的组件中才能安全componentWillReceiveProps.

如果触发其dispatch内部componentWillReceiveProps将导致setState其他组件导致应用程序中断.

总的来说:我会推荐这个流程.(关闭动作已启动)=>动画模式已关闭=>在start(() => {})回调中会导致setState或在您的redux商店中设置一段数据,然后unmount您的模态将被隐藏.

这样您就可以获得卸载动画.

如果您使用路由,react-navigation我建议设置mode: "modal"导航样式.这样,卸载/安装模态动画就可以为您完成.