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工作原理就像任何其他反应本机组件一样，请在此处阅读更多内容（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>