你怎么能用反应导航在屏幕之间有不同的过渡动画？

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/

Answer 2

进行了一些研究，并能够使用以下代码使其工作：

const AppNavigator = createStackNavigator({
    Home: {
        screen: Home
    },
    Page2: {
        screen: Page2
    }
},
{
    initialRouteName: "Home",
    headerMode: "none",
    defaultNavigationOptions: {
        gesturesEnabled: false
    },
    transitionConfig: () => ({
        transitionSpec: {
          duration: 1400,
          easing: Easing.out(Easing.poly(4)),
          timing: Animated.timing,
        },
        screenInterpolator: sceneProps => {
          const { layout, position, scene } = sceneProps;
          const { index } = scene;

          const height = layout.initHeight;
          const translateY = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [height, 0, -height],
          });

          const opacity = position.interpolate({
            inputRange: [index - 1, index - 0.99, index],
            outputRange: [0, 1, 1],
          });

          return { opacity, transform: [{ translateY }] };
        },
      }),
});

最难的部分是理解插值，因为似乎有很多看似任意的值。我没有找到最好的文档，但是能够得出以下理解：

以下面的代码为例。这里首先要设置翻译类型，在本例中为 translateY

const translateY = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [height, 0, -height],
          });

下一个令人困惑的部分是输入和输出范围，这些数字是什么意思？那么输入范围实际上映射到输出范围。看起来像这样：

inputRange: [newScreen, currentScreen, previousScreen]

在 inputRange 中，我们指定要为哪些屏幕设置动画，然后在输出范围中，我们指定要对这些屏幕执行的操作。修改outputRange[0]会修改newScreen等

因为我们已经将翻译类型设置为 translateY，所以我们知道屏幕正在向上或向下移动。

outputRange: [height, 0, -height]

现在告诉新屏幕向上移动到屏幕顶部，旧屏幕也向上移动，超出屏幕顶部（因此 -height 与 -100vh 相同在 CSS).

你怎么能用反应导航在屏幕之间有不同的过渡动画？

How can you have different transition animations between screens with react-navigation?

react-native

react-navigation

expo

react-native-reanimated