React Native Expo使用alias作为文件路径导入时找不到文件如何解决？

安全阿岳

2026-9-27

问题原因及修复方案

配置存在的问题

你的报错是由babel和tsconfig的路径配置多处不规范导致的：

两者的baseUrl/root配置错误：填写的/是操作系统根目录，而非当前项目根目录
babel的alias配置路径不统一、缺少相对路径前缀：部分路径没有加./指向项目内目录，同时有的别名加了通配符*有的未加，和tsconfig的paths规则不匹配
babel的module-resolver插件未配置可识别的文件后缀，无法正确解析项目内的ts/tsx文件

修复后的配置

1. 修正babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    "plugins": [
      [
        "module-resolver",
        {
          "root": ["./"], // 指向项目根目录
          "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"], // 补充识别的文件后缀
          "alias": {
            "~/images": "./assets/images",
            "~/fonts": "./assets/fonts",
            "~/navigation": "./navigation",
            "~/hooks": "./hooks",
            "~/screens": "./screens",
            "~/components": "./components"
          }
        }
      ]
    ]
  };
};

2. 修正tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".", // 指向项目根目录
    "paths": {
      "~/images/*": ["./assets/images/*"],
      "~/fonts/*": ["./assets/fonts/*"],
      "~/navigation/*": ["./navigation/*"],
      "~/hooks/*": ["./hooks/*"],
      "~/screens/*": ["./screens/*"],
      "~/components/*": ["./components/*"]
    },
  },
}