起始日期：“@React导航/本机”：“^5.5.1”，

import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';

const TransitionScreenOptions = {
  ...TransitionPresets.SlideFromRightIOS, // This is where the transition happens
};

const CreditStack = createStackNavigator();

function CreditStackScreen() {
  return (
    <CreditStack.Navigator screenOptions={TransitionScreenOptions}> // Don't forget the screen options
      <CreditStack.Screen
        name="Credit"
        component={HomeScreen}
        options={headerWithLogo}
      />
      <HomeStack.Screen
        name="WorkerDetails"
        component={WorkerDetails}
        options={headerWithLogoAndBackBtn}
      />
    </CreditStack.Navigator>
  );
}

您可以观看此视频了解更多信息：https://www.youtube.com/watch?v=PvjV96CNPqM&ab_channel=UnsureProgrammer

您应该使用transitionConfig来覆盖本页中所写的默认屏幕过渡。
遗憾的是，没有提供该函数如何工作的示例，但您可以在此文件中找到一些示例：\react-navigation\lib\views\CardStackStyleInterpolator.js
因此，您的代码应该如下所示：

const navigator = StackNavigator(scenes, {
transitionConfig: () => ({
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [layout.initWidth, 0, 0]
        });

        const opacity = position.interpolate({
            inputRange: [
                index - 1,
                index - 0.99,
                index,
                index + 0.99,
                index + 1
            ],
            outputRange: [0, 1, 1, 0.3, 0]
        });

        return { opacity, transform: [{ translateX }] };
    }
})
});

适用于堆栈导航6.x.x
仅导入

import { TransitionPresets } from '@react-navigation/stack';

然后创建配置：

const screenOptionStyle = {
  // headerShown: false,  
  ...TransitionPresets.SlideFromRightIOS,
};

最后，只需将它们分配到堆栈导航器屏幕选项：

<Stack.Navigator 
     screenOptions={screenOptionStyle}
    > 

      <Stack.Screen 
      ...
      ...

您需要从“react-navigation-stack”导入StackViewTransitionConfigs，然后覆盖transitionConfing函数。

const myStack = createStackNavigator({
    Screen1,
    Screen2,
    Screen3
},{
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS
}

在@react-navigation/stack组件版本上，从右侧动画开始制作幻灯片的方法是：

<Stack.Navigator
    screenOptions={{
        cardStyleInterpolator: ({index, current, next, layouts: {screen}}) => {
            const translateX = current.progress.interpolate({
                inputRange: [index - 1, index, index + 1],
                outputRange: [screen.width, 0, 0],
            });

            const opacity = next?.progress.interpolate({
                inputRange: [0, 1, 2],
                outputRange: [1, 0, 0],
            });

            return {cardStyle: {opacity, transform: [{translateX}]}};
        },
    }}>
    <Stack.Screen name="MainScreen" component={MainScreen} />
    ...
</Stack.Navigator>

最好使用react原生navigation。你可以使用configureScene方法来配置你的屏幕。在该方法中使用Navigator.SceneConfigs来设置屏幕动画。它适用于Android和iOS。

你可以从index.d.ts文件中得到有用的信息，找到export interface TransitionConfig，然后按下'Ctrl' & left_click在NavigationTransitionSpec和NavigationSceneRendererProps上，然后你就可以得到你想要的一切。

以上所有答案都是正确的，但是这些解决方案仅在使用createStackNavigator时有效，而在使用createNativeStackNavigator时无效;不幸的是，如果您正在阅读react-navigation文档中的入门部分，那么您最终将使用后者。
Here您可以找到一个SO问题来说明两者之间的差异，但与此问题最相关的一个问题是，您可以传递给前者的许多选项（如transitionConfig）无法传递给后者。
如果您使用createNativeStackNavigator，则可以这样做：

import { createNativeStackNavigator } from '@react-navigation/native-stack'

const StackNavigator = createNativeStackNavigator()

const MyNativeStackNavigator = () =>{
    
    return  <StackNavigator.Navigation
        screenOptions={{
          animation: 'slide_from_right', //<-- this is what will do the trick
          presentation: 'card',
        }}
      >
        {routes}
      </StackNavigator.Navigator>

}