React Native 0.72.5 TypeScript项目如何配置绝对导入（无需弃用库）

1. 修改tsconfig.json #

更新TypeScript配置，让编译器识别绝对路径别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    // 保留项目原有其他compilerOptions配置
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*", "typings/**/*"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

• baseUrl 设置为项目根目录（.）
• paths 映射 @/* 到 src/*，后续可直接用 @/components/Button 替代 ../components/Button 这类相对导入

2. 配置Metro打包工具 #

React Native依赖Metro处理模块解析，需修改metro.config.js（TypeScript项目对应metro.config.ts）：

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

const config = {};

const defaultConfig = getDefaultConfig(__dirname);
// 扩展Metro的解析规则，让它识别@别名
defaultConfig.resolver.alias = {
  ...defaultConfig.resolver.alias,
  '@': path.resolve(__dirname, 'src'),
};

module.exports = mergeConfig(defaultConfig, config);

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

配置完成后，需清除旧缓存避免干扰：

• 停止当前运行的Metro服务
• 执行缓存清除命令：

npx react-native start --reset-cache

• 重新启动项目：npx react-native run-android 或 npx react-native run-ios

验证配置 #

现在可以在代码中使用绝对导入，示例：

// 原相对导入
import Button from '../components/Button';
// 新绝对导入
import Button from '@/components/Button';

TypeScript不会报错，Metro也能正确解析模块路径。

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