react native 配置路径别名alias

前言

本文基于

• “react-native”: “^0.70.1”

1.安装依赖

yarn add babel-plugin-module-resolver --save

2.配置 babel.config.js

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

3.根目录新建 tsconfig.json (可选项)

这一步 ts 项目才需要，js 项目直接看下一步

{
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

4.使用别名

新建 src 文件夹，使用 @ 别名引入 src 文件夹下的文件

5.效果图

yarn android

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。