React Native使用@react-navigation遇NavigationContainer不存在错误求助

问题概述 #

开发React Native应用时，使用@react-navigation库实现栈导航，App.js中已导入NavigationContainer并配置栈导航，但运行时抛出错误：

ReferenceError: Property 'NavigationContainer' doesn't exist

已确认安装依赖、IDE无编译错误，但问题依旧。

可行解决方案 #

1. 重新确认并安装完整依赖 #

确保所有必需的导航依赖都正确安装，执行以下命令：

# 安装核心导航库
npm install @react-navigation/native

# 安装React Native所需的底层依赖
npm install react-native-screens react-native-safe-area-context

# 安装原生栈导航组件
npm install @react-navigation/native-stack

如果使用Yarn，替换为yarn add命令。

2. 清除缓存并重启服务 #

缓存问题常导致模块无法正确识别，执行以下步骤：

• 清除npm缓存：

  npm cache clean --force
  

• 清除React Native Metro缓存并重启服务：

  npx react-native start --reset-cache
  

3. 重置依赖安装 #

若依赖安装不完整，删除现有依赖文件后重新安装：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json

# 重新安装所有依赖
npm install

4. 完全重启应用环境 #

• 关闭当前运行的Metro服务器和模拟器/真机
• 重新启动模拟器/真机
• 运行应用：

  npx react-native run-android # Android环境
  # 或
  npx react-native run-ios     # iOS环境
  

5. 确认代码语法正确性 #

检查App.js中的JSX语法是否正常，确保没有使用转义字符（如<应改为<，"应改为"），正确的代码结构参考：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './WelcomeScreen';
import Login from './Login';
import SignUp from './SignUp';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Welcome"
          component={WelcomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

内容的提问来源于stack exchange，提问作者Sarimm Chaudhry