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与CSS中的-100vh相同））。

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

2 个答案: