在开发应用时，经常需要引入各种文件、组件等等，如果不设置路径别名，就很容易出现类似./、../、../../../ 等这种写法，看着相当繁琐，写起来也容易出错，如果需要移动文件时，不更改路径引入就很容易出现问题。如果将这些文件的路径都是相对于项目根目录的设置的话，那么写起来就很容易，也不易出错了。

1、在 metro.config.js 中配置如下：

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

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const config = {
  resolver: {
    alias: {
      '@': path.resolve( __dirname, 'src' ),
      '@src': path.resolve( __dirname, 'src' ),
      '@navigation': path.resolve( __dirname, 'src/navigation' ),
      '@components': path.resolve(__dirname, 'src/components'),
      '@assets': path.resolve( __dirname, 'src/assets' ),
      '@screens': path.resolve( __dirname, 'src/screens' ),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
};

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

2、安装 babel-plugin-module-resolver 插件（npm install --save-dev babel-plugin-module-resolver），并在 babel.config.js 中配置如下：

module.exports = {
  presets: [ 'module:@react-native/babel-preset' ],
  plugins: [
    [
      'module-resolver',
      {
        extensions: [ '.tsx', '.ts', '.js', '.json' ],
        alias: {
          '@': './src',
          '@src': './src',
          '@navigation': './src/navigation',
          '@components': './src/components',
          '@assets': './src/assets',
          '@screens': './src/screens',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

现在重启项目即可使用路径别名了，不用再使用丑陋的../../ 这种写法了。

注意：

• Babel 配置：是为了确保代码转换阶段正确处理别名
• Metro 配置：是为了确保模块解析阶段正确处理别名