react-native配置路径别名【官网推荐方案】

配置路径别名

官网解决方案

修改 tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

引入 babel 插件

yarn add --dev babel-plugin-module-resolver

修改 babel.config.js

{
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     [
        'module-resolver',
        {
          root: ['./src'],
          extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
          alias: {
            '@': ['./src'],
          }
        }
     ]
   ]
}

最后清理一下缓存再运行

# 清理缓存后运行
yarn start --reset-cache