React Native Expo栈导航实现报错：Invariant Violation: 'main'未注册

问题根源 #

你的代码存在两个核心问题：

• 缺少导航组件的必要导入
• 安装了冗余且版本不兼容的导航依赖

具体修复步骤 #

1. 修正App.js的导入代码
   你当前的代码里没有导入NavigationContainer和NativeStackNavigator，这是使用@react-navigation/native-stack的必备组件。修改后的App.js如下：

   import React from 'react';
   import { StatusBar } from 'react-native';
   import { NavigationContainer } from '@react-navigation/native';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import MainScreen from './Components/MainScreen';
   import AddNewItem from './Components/NewItemForm';
   import SearchScreen from './Components/SearchScreen';
   
   const Stack = createNativeStackNavigator();
   
   export default function App() {
     return (
       <>
         <StatusBar hidden={true} />
         <NavigationContainer>
           <Stack.Navigator>
             <Stack.Screen
               name="Home"
               component={MainScreen}
               options={{ title: 'Main Screen' }}
             />
             <Stack.Screen name="AddNewItem" component={AddNewItem} options={{ title: 'Add New Item' }} />
             <Stack.Screen name="SearchScreen" component={SearchScreen} options={{ title: 'Search Orders' }} />
           </Stack.Navigator>
         </NavigationContainer>
       </>
     );
   }
   

2. 清理冗余依赖
   你的package.json里同时安装了旧版的react-navigation-stack和不匹配的@react-navigation/stack，这些会和@react-navigation/native-stack产生冲突。执行以下命令卸载冗余包：

   npm uninstall react-navigation-stack @react-navigation/stack
   # 若使用yarn则执行：
   yarn remove react-navigation-stack @react-navigation/stack
   

3. 重启Expo项目
   关闭当前的Expo开发服务器，重新执行expo start，确保所有依赖生效。

额外说明 #

• Expo环境下推荐使用@react-navigation/native-stack而非旧版的react-navigation-stack，前者更适配Expo的运行环境
• 确保所有导航相关依赖版本匹配，你当前的@react-navigation/native（6.0.13）和@react-navigation/native-stack（6.9.0）版本是兼容的

内容的提问来源于stack exchange，提问作者Usama Asif