React Navigation：强制屏幕从左到右进行动画处理答案

【问题标题】：React Navigation: Force screen to animate from left to rightReact Navigation：强制屏幕从左到右进行动画处理
【发布时间】：2022-07-19 11:53:56
【问题描述】：

使用 React Navigation v6.x 并使用 .navigate() 函数，新视图总是从右到左动画。

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

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

谁能给我一些建议？

干杯

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-v6

【解决方案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>

【讨论】：

不幸的是，这对我不起作用。当我执行 .navigate(); 时，似乎 cardStyleInterpolator 函数甚至没有被调用

【解决方案2】：

设置选项

动画：'slide_from_right'

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

【讨论】：