React Native项目中tsconfig.json的baseUrl为何失效？

问题根源分析 #

VS Code自动补全正常但运行报错，核心原因有两点：

• 文件大小写不匹配：实际文件夹是src/Screens（首字母大写），但tsconfig和babel.config里配置的是src/screens（小写）。macOS文件系统查询时不严格区分大小写，VS Code能识别，但Metro打包器严格遵循文件系统的大小写规则，导致运行时找不到文件。
• Metro配置缺失：React Native 0.71版本的Metro打包器不会自动读取babel-plugin-module-resolver的配置，需要单独配置路径别名。

分步解决方案 #

1. 统一文件夹与配置的大小写 #

选择以下两种方式之一：

• 修改文件夹名称：将src/Screens重命名为src/screens（全小写），和配置路径保持一致。
• 修改配置路径：将tsconfig.json和babel.config.js中的src/screens/*改为src/Screens/*，匹配实际文件夹的大小写。

2. 配置Metro打包器支持别名 #

创建或修改项目根目录下的metro.config.js，添加别名配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

const customConfig = {
  resolver: {
    alias: {
      '@screens': path.resolve(__dirname, 'src/screens'), // 这里要和实际文件夹大小写完全一致
    },
  },
};

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

3. 清除缓存并重启服务 #

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

yarn start --reset-cache

缓存清除完成后，重新运行yarn ios启动项目。

4. 确认依赖已安装 #

确保已安装babel-plugin-module-resolver，如果未安装则执行：

yarn add --dev babel-plugin-module-resolver

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