您如何在具有反应导航的屏幕之间具有不同的过渡动画？

Question

我目前正在使用具有2个屏幕的ReactNative应用程序。目标是对屏幕进行动画处理，以使它们根据您来自哪个屏幕而彼此上下推。下面的GIF是我要实现的过渡。

当前，我正在使用createAnimatedSwitchNavigator来创建效果，问题是我当前的过渡仅将屏幕向上推。有没有一种方法可以检测我当前在动画切换导航器中的哪个屏幕上，从而可以更改过渡的方向？

const MySwitch = createAnimatedSwitchNavigator(
  {
    Home: {
        screen: Home
    },
    Page2: {
        screen: Page2
    },
  },
  {
    transition: (
        <Transition.Together>
            <Transition.Out
                type="slide-top"
                durationMs={400}
                interpolation="easeIn"
            />
            <Transition.In type="slide-bottom" durationMs={500} />
        </Transition.Together>
    )
  }
);

请为此指导我。

谢谢

Answer 1

这里是react-navigation-stack 2.0 alpha / react-navigation 5的指南

https://callstack.com/blog/custom-screen-transitions-in-react-navigation/