Expo CLI创建的React Native项目根相对路径导入图片及static路径疑问

一、assets根相对路径导入的实现方法 #

原有配置失效的核心原因 #

• 未安装babel-plugin-module-resolver依赖：仅修改babel配置但未引入插件包，配置不会生效。
• 相对路径解析偏差：原配置中alias的./assets是相对于babel运行时工作目录解析，而非固定指向项目根目录，容易出现路径匹配错误。
• 缓存未清理：Expo开发服务器默认缓存babel编译结果，修改配置后未清缓存会导致旧配置继续生效。
• 插件顺序问题：module-resolver需要优先处理模块路径，若位置靠后会被其他插件提前处理import语句导致失效。

正确配置步骤 #

1. 安装依赖：

yarn add babel-plugin-module-resolver
# 或 npm install babel-plugin-module-resolver

2. 调整babel.config.js，使用__dirname拼接绝对路径，将插件放在plugins数组首位：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            assets: `${__dirname}/assets`,
          },
        },
      ],
    ],
  };
};

3. 若使用TypeScript，同步修改tsconfig.json配置路径映射，保证IDE补全与类型识别：

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

4. 清理缓存重启开发服务：

expo start --clear

若仍未生效，手动删除项目下的node_modules/.cache、.expo文件夹后重启即可。

也可以选择直接修改Metro配置实现别名，无需依赖babel插件：

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const config = getDefaultConfig(__dirname);
config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  assets: path.resolve(__dirname, 'assets')
};
module.exports = config;

二、static虚拟路径说明 #

路径本质 #

static是Expo内置的未公开虚拟别名，在SDK 36的默认Metro配置中，该路径被直接映射到项目根目录下的assets文件夹，因此static/images/myImage.jpg会被自动解析为./assets/images/myImage.jpg，无需手动配置即可导入。

使用安全性 #

不推荐生产环境使用该路径导入资源，原因如下：

• 该别名不属于官方公开的稳定API，无文档说明与兼容性保障，Expo版本迭代时可能随时修改映射规则甚至移除该特性，导致所有引用代码失效。
• 无IDE支持：编辑器无法识别该虚拟路径，不会提供自动补全、路径跳转、引用统计等能力，后期维护成本高。

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