reactjs - 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>