Expo CLI安卓构建正常，React Native部署因模块别名解析失败报错

核心原因 #

1. Expo CLI自带的Metro配置会自动兼容tsConfigPaths和别名解析，但prebuild生成原生项目后，直接调用npx react-native start使用的是原生React Native的Metro服务，它不会自动继承Expo的别名解析逻辑，需要手动确保Metro配置完全生效。
2. 缓存残留：即使执行了--reset-cache，原生环境的Gradle缓存、Metro磁盘缓存可能未彻底清除，导致旧的模块解析规则仍在生效。
3. tsconfig.json路径映射格式错误：比如baseUrl未设置为项目根目录，或路径缺少通配符/*，导致原生Metro无法正确匹配模块路径。

解决步骤 #

• 修正tsconfig.json配置
  确保baseUrl和paths配置符合规范：

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

• 确保Metro配置正确生效
  在项目根目录的metro.config.js中明确配置别名，不要依赖Expo的自动配置：

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

• 彻底清除所有缓存
  执行以下命令清除所有相关缓存：

  # 清除Metro缓存
  npx react-native start --reset-cache
  # 清除Android构建缓存
  cd android && ./gradlew clean && cd ..
  # 清除Expo开发缓存
  npx expo start --clear
  

• 检查文件路径大小写
  原生Android环境对文件路径大小写敏感，确认@/components/HapticTab对应的实际文件（如src/components/HapticTab.tsx）的文件名、目录名大小写完全匹配。

• 重新生成原生目录
  执行npx expo prebuild --clean重新生成android目录，确保Expo的配置被正确同步到原生项目中，避免手动修改android目录下的文件导致配置冲突。

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