如何配置Expo支持全局模块导入？解决多层相对路径导入问题

我帮你整理了几个在React Native里摆脱多层相对路径的实用方案，都是不需要额外配置Webpack或Babel的——毕竟React Native本身用的是Metro打包器，咱们直接用它的原生能力就行：

1. 配置Metro路径别名（最推荐） #

这是React Native官方支持的方式，一步到位解决代码和资源文件的导入问题：

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

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

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    alias: {
      '@app': './src', // 把src目录映射为@app别名
    },
  },
});

• 配置完成后必须重启Metro服务，不然新的别名不会生效
• 之后不管是代码还是资源文件，都可以用别名导入：
  • 代码：import { get_records } from '@app/store/actions/async';
  • 资源：import avatar from '@app/assets/images/avatar.png';

2. 本地package.json命名空间（无需修改Metro配置） #

如果你之前尝试的这个方法没生效，大概率是细节没做对，重新梳理下步骤：

• 在src目录下创建package.json，内容只需要一行：{"name": "@app"}，不需要其他冗余字段
• 确保你的导入路径对应正确：@app/store/actions/async就指向src/store/actions/async.js（或.ts文件）
• 如果你用TypeScript，还需要在项目根目录的tsconfig.json里补充路径映射，不然编辑器会报错：

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

• 同样，配置后要重启Metro和你的代码编辑器，让路径解析规则生效

为啥之前的AppRegistry名称方法没用？ #

main/src/...这种路径React Native默认是不识别的，因为Metro只会从项目根目录、node_modules或者你配置的别名路径里查找文件，所以这个方法其实行不通，不用再试啦。

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