如何解决App.js中无法解析‘@react-navigation/native-stack’的问题

算力阿峰

2026-7-10

React Native 导航依赖安装后问题仍未解决的排查方案

确认依赖版本兼容性：@react-navigation/native、@react-navigation/native-stack 必须与你的React Native版本匹配。执行命令查看当前依赖版本：
```
npm list @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
```
React Native 0.70+ 要求导航包版本至少为6.x，若版本不匹配，卸载现有包后安装对应兼容版本。
补全核心依赖：@react-navigation/native 依赖 react-native-screens 和 react-native-safe-area-context，这两个是运行导航的必要组件，未安装则执行：
```
npm install react-native-screens react-native-safe-area-context
```
完成iOS端Pod配置：如果开发iOS应用，进入iOS目录更新Pod依赖：
```
cd ios && pod install && cd ..
```

验证导航容器的正确使用：确保根组件用NavigationContainer包裹导航栈，示例代码：

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

深度清除缓存并重装依赖：
1. 删除node_modules、package-lock.json（或yarn.lock）
2. 执行npm install重装依赖
3. 用npx react-native start --reset-cache启动Metro服务
查看具体错误日志：运行应用时打开终端或调试工具，定位控制台输出的具体错误信息（如模块缺失、版本冲突、配置错误等），这是解决问题的核心依据。