React Native Expo项目无法解析@react-navigation-stack模块如何解决？

• 导入路径和已安装的包完全不匹配：你package.json中安装的是react-navigation-stack（属于React Navigation 4.x版本的栈导航依赖），但代码里写的导入路径是@react-navigation-stack，带@前缀的是React Navigation 5/6版本的依赖命名规则，且就算你安装了高版本栈导航，正确的高版本包名也是@react-navigation/stack，你写的路径本身就存在拼写错误，自然无法解析到模块。
• React Navigation版本严重混用：你同时安装了4.x版本的react-navigation、react-navigation-stack，又安装了5/6版本的@react-navigation/native、@react-navigation/core，不同大版本的React Navigation API完全不兼容，就算解决了模块解析问题也会触发大量后续报错。
• 代码存在多处语法/规则错误：
  1. 未导入NavigationContainer就直接在代码中使用
  2. 自定义导航组件myStack首字母小写，不符合React组件首字母必须大写的规则
  3. <Stack.Sreen存在拼写错误，正确写法是<Stack.Screen

1. 先卸载所有冲突的旧依赖：

npm uninstall react-navigation react-navigation-stack @react-navigation/core @react-navigation/native

2. 安装正确的6版本全量依赖：

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

3. 修改App.js为匹配6版本的正确代码：

import 'react-native-gesture-handler';    
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// 导入导航容器
import { NavigationContainer } from '@react-navigation/native';
// 正确导入6版本栈导航
import { createStackNavigator } from '@react-navigation/stack';
import Home from './src/components/Home.js';

const Stack = createStackNavigator();

// 组件名首字母大写
function MyStack() {
  return (
    <Stack.Navigator>
      {/* 修正拼写错误 */}
      <Stack.Screen 
      name="Home" 
      component={Home}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack/>
    </NavigationContainer>
  );
}

若要继续使用4.x版本的临时修复方案 #

1. 卸载高版本冲突依赖：

npm uninstall @react-navigation/core @react-navigation/native

2. 修改导入逻辑匹配4版本规则：

// 去掉@前缀，匹配已安装的4版本包名
import { createStackNavigator } from 'react-navigation-stack';
// 4版本的导航容器为createAppContainer
import { createAppContainer } from 'react-navigation';

3. 调整导航创建逻辑：

const AppNavigator = createStackNavigator({
  Home: { screen: Home }
});

export default createAppContainer(AppNavigator);

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