React Native项目中TypeScript文件互导时绝对路径失效问题求助

核心问题是VSCode的TS路径映射仅提供语法提示，但Metro构建时未同步解析规则，导致TS互导时出现文件找不到的错误。以下是官方标准配置方案：

1. 配置tsconfig.json路径映射 #

确保compilerOptions中设置baseUrl和paths，让TS编译器识别绝对路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // @对应src目录，可根据你的项目结构调整别名和目标路径
    },
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

2. 配置metro.config.js解析别名 #

Metro是RN的构建工具，必须单独配置路径别名才能正确解析TS文件间的导入：

// RN 0.71+ 版本使用@react-native/metro-config合并默认配置
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {
  resolver: {
    alias: {
      '@': require('path').resolve(__dirname, 'src'),
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

// 旧版RN可直接编写配置：
// module.exports = {
//   resolver: {
//     alias: {
//       '@': __dirname + '/src',
//     },
//   },
// };

3. 同步Babel配置（若原有依赖） #

如果你之前用babel-plugin-module-resolver实现JS文件的绝对路径，保持配置同步：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@': './src',
        },
      },
    ],
  ],
};

未安装插件的话先执行：npm install --save-dev babel-plugin-module-resolver

4. 清理缓存重启服务 #

执行以下命令彻底清除Metro缓存，避免旧配置残留：

npx react-native start --reset-cache

以上配置让TS编译器、VSCode提示、Metro构建三者的路径规则完全对齐，解决TS文件间绝对路径失效的问题，无需手动添加package.json临时文件。

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