如何将RN 0.59.10代码升级到0.72.5？initialRouteName报错求助

我把React Native从0.59.10版本升级到0.72.5版本后，在StackNavigator中设置initialRouteName: 'Notifications'时出现报错，试了多种方法都没解决，作为新手恳请各位帮忙。

相关代码：

const NotificationStackNavigator = createStackNavigator(
  {
      Notifications:{                           //PAGE: To-Do => List Of Leave
          screen: Notification,
          navigationOptions:{
              title: 'Notifications'
          }
      },
      //#region Leave Application
      AllApprovalInToDo: {                      //PAGE: To-Do => All List Of Leave
          screen: AllApprovalInToDo,
          navigationOptions: {
            title: 'Approval Leave Request',
            headerBackTitle: 'Back',
            headerStyle:{
                backgroundColor: Blue,
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'normal'
            }
        }
      },
      ApprovalItem: {                         //PAGE: To-Do => Leave Detail
        screen: ApprovalItem,
      },
      LeaveApprovalToDoFilter: {              //PAGE: To-Do => Leave Filter
        screen: PendingLeaveApprovalFilter
      },
      //#endregion Leave Application
      //#region Overtime
      OvertimeApprovalDetail: {               //PAGE: To-Do => Overtime Detail
        screen: OvertimeApprovalDetail
      },
      OvertimeAllApproval: {                  //PAGE: To-Do => All List of Overtime
        screen: OvertimeAllApproval
      },
      OvertimeApprovalFilter: {               //PAGE: To-Do => Overtime Filter Page
        screen: OvertimeApprovalFilter
      }
      //#endregion Overtime
  },
  {
      initialRouteName: 'Notifications',
  },
);

报错提示：The initial route name 'Notifications' does not exist in the route configs

解决方案 #

问题核心是React Navigation版本不兼容：RN0.59搭配的是React Navigation 4.x，而RN0.72需要使用React Navigation 6.x，两者API完全重构，你的代码还是旧版本写法，因此报错。

1. 安装正确的依赖

先卸载旧导航依赖，安装React Navigation 6.x核心包及Native Stack：

npm uninstall react-navigation react-navigation-stack
npm install @react-navigation/native @react-navigation/native-stack
npx pod-install ios

2. 改写导航代码

按照React Navigation 6.x规范修改代码：

// 导入新导航组件
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 创建Stack导航器实例
const Stack = createNativeStackNavigator();

// 定义Stack导航组件
function NotificationStackNavigator() {
  return (
    <Stack.Navigator initialRouteName="Notifications">
      {/* Notifications路由 */}
      <Stack.Screen 
        name="Notifications" 
        component={Notification}
        options={{ title: 'Notifications' }}
      />
      {/* AllApprovalInToDo路由 */}
      <Stack.Screen 
        name="AllApprovalInToDo" 
        component={AllApprovalInToDo}
        options={{
          title: 'Approval Leave Request',
          headerBackTitle: 'Back',
          headerStyle:{
              backgroundColor: Blue,
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
              fontWeight: 'normal'
          }
        }}
      />
      {/* 其余路由依次转换 */}
      <Stack.Screen name="ApprovalItem" component={ApprovalItem} />
      <Stack.Screen name="LeaveApprovalToDoFilter" component={PendingLeaveApprovalFilter} />
      <Stack.Screen name="OvertimeApprovalDetail" component={OvertimeApprovalDetail} />
      <Stack.Screen name="OvertimeAllApproval" component={OvertimeAllApproval} />
      <Stack.Screen name="OvertimeApprovalFilter" component={OvertimeApprovalFilter} />
    </Stack.Navigator>
  );
}

// 在App根组件中用NavigationContainer包裹导航器
export default function App() {
  return (
    <NavigationContainer>
      <NotificationStackNavigator />
    </NavigationContainer>
  );
}

关键变化说明

• 旧版本createStackNavigator接受两个对象参数，新版本需用createNativeStackNavigator创建实例，通过Stack.Navigator和Stack.Screen组件定义路由。
• 原navigationOptions替换为Stack.Screen的options属性。
• 必须用NavigationContainer作为所有导航组件的根容器，这是新版本强制要求。
• initialRouteName直接设置在Stack.Navigator属性中，逻辑与旧版本一致，但位置调整。

内容的提问来源于stack exchange，提问作者Ropon Pov