配置React Native绝对导入遇Metro模块解析错误求助

• 检查TS/JS配置文件路径映射
  确保tsconfig.json（或jsconfig.json）的compilerOptions配置正确，以源码在src目录为例：

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "navigation/*": ["navigation/*"]
      }
    },
    "include": ["src/**/*"]
  }
  

  baseUrl需指向源码根目录，paths要精准映射目标文件夹，include要覆盖所有源码文件，保障IDE和TypeScript能正确识别路径。

• 配置Metro解析别名（核心步骤）
  React Native依赖Metro进行模块解析，仅靠TS配置不足以让Metro识别绝对路径，必须修改metro.config.js：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      alias: {
        'navigation': './src/navigation',
      },
    },
  });
  

  这里的alias要与TS配置里的路径完全对应，把navigation指向实际的源码文件夹路径。

• 清除Metro缓存
  缓存残留可能导致旧解析规则生效，执行命令重置缓存：

  npx react-native start --reset-cache
  

  也可以手动删除node_modules/.cache目录下的Metro相关缓存文件。

• 校验文件路径大小写
  MacOS文件系统大小写不敏感，但Metro打包时严格区分大小写，确认导入语句中的文件名、文件夹名与实际文件系统中的完全一致，比如避免出现stack-routes和Stack-Routes的大小写差异。

• 确认配置文件位置
  确保tsconfig.json和metro.config.js都放在项目根目录（与package.json同级），不要放在src子目录下，否则配置无法被正确读取。

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