Expo构建React Native应用报错无法解析@react-navigation/core怎么办

1. 依赖安装方式错误：package.json中@react-navigation/core和@react-navigation/native的版本填写为react-navigation/core、react-navigation/native，该写法会直接拉取GitHub仓库的原始源码，源码未经过编译构建，不存在package.json中main字段指向的lib/module/index.js入口文件，因此触发解析失败。
2. Metro配置失效：你在metro.config.js中先定义了自定义配置，最后又直接导出getDefaultConfig(__dirname)，后续的导出会完全覆盖前面的自定义配置，你添加的后缀识别规则等配置完全没有生效。
3. 导航依赖版本冲突：项目同时安装了React Navigation v4版本的react-navigation、react-navigation-stack和v5版本的@react-navigation/native、@react-navigation/stack，两个大版本的包共存会导致依赖解析混乱，出现兼容问题。

• 第一步：清理本地缓存与旧依赖
  执行以下命令删除旧的依赖文件和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 第二步：修正依赖配置
  从package.json的dependencies中移除以下冲突、错误的依赖项：

  @react-native-community/masked-view
  @react-navigation/core
  @react-navigation/native
  @react-navigation/stack
  react-navigation
  react-navigation-stack
  

  执行以下命令安装和Expo 42版本兼容的React Navigation v5正式包：

  npm install @react-navigation/native@^5.x @react-navigation/stack@^5.x react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-gesture-handler react-native-reanimated
  

• 第三步：修正Metro配置
  将metro.config.js内容修改为以下格式，合并默认配置与自定义配置，避免覆盖：

  const { getDefaultConfig } = require('expo/metro-config');
  
  const defaultConfig = getDefaultConfig(__dirname);
  
  module.exports = {
    ...defaultConfig,
    resolver: {
      ...defaultConfig.resolver,
      sourceExts: [...defaultConfig.resolver.sourceExts, 'jsx', 'js', 'ts', 'tsx'],
    },
    maxWorkers: 2,
    transformer: {
      ...defaultConfig.transformer,
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };
  

• 第四步：重新构建启动
  先执行npm install完成依赖安装，之后使用清空缓存的命令启动项目，避免旧缓存影响：

  expo start --clear
  

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