React Navigation：强制屏幕从左到右动画

Question

使用 React Navigation v6.x 并使用

.navigate()

函数，新视图始终从右到左进行动画处理。

通常这很好，但我有几个视图总是想从左侧加载。

我尝试阅读与转换相关的文档、代码示例和 stackoverflow 线程，但无法收集到任何有用的信息。

任何人都可以给我一些建议吗？

干杯

Answer 1

首先在下面做这个。

 const leftToRightAnimation = {
  cardStyleInterpolator: ({ current, layouts }) => {
    return {
      cardStyle: {
        transform: [
          {
            translateX: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [-layouts.screen.width, 0],
            }),
          },
        ],
      },
    };
  },
};

基本上它所做的就是将屏幕从全屏幕宽度的 x 方向向左移动以适合屏幕。隐含的进度是从 0 到 1。

• transform

  的工作方式就像任何其他react-native组件一样，请在此处阅读更多内容（https://reactnative.dev/docs/transforms）。
• 它使用来自react-native的插值

  animated

  （https://reactnative.dev/docs/animated）

然后将其放入您想要应用过渡的屏幕中。

<NavigationContainer>
      <Root.Navigator headerMode="none" initialRouteName="Home">
        <Root.Screen name="Home" component={Home} />
        <Root.Screen name="NotModal" component={NotModal} options={leftToRightAnimation} />
      </Root.Navigator>
 </NavigationContainer>

Answer 2

设置选项

动画：'slide_from_right'

https://reactnavigation.org/docs/native-stack-navigator/#options

Answer 3

这取决于导航器

对于堆栈导航器

使用

gestureDirection: 'horizontal-inverted'

。一个例子：

    <Stack.Navigator
      screenOptions={{
        gestureDirection: 'horizontal-inverted',
      }}
    >
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
    </Stack.Navigator>

对于本机堆栈导航器

使用

animation: 'slide_from_right'

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{animation: 'slide_from_right'}}
  />
  <Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{animation: 'slide_from_right'}}
  />
</Stack.Navigator>

Answer 4

2023解决方案

您可以通过设置“gestureDirection”选项来定义方向。

对于 Stack.Navigator：

      <Stack.Navigator
        screenOptions={{
          gestureDirection: "horizontal-inverted"}
        }}
      ></Stack.Navigator>

对于 Stack.Screen：

      <Stack.Screen
        options={{
          gestureDirection: "horizontal-inverted"}
        }}
      ></Stack.Screen>