首页 > 网络编程 > JavaScript > javascript类库 > React > react native配置路径别名alias

react native配置路径别名alias过程

2026-03-15 10:27:21 作者：好巧.

文章介绍了如何在React Native项目中使用TypeScript进行开发,包括安装依赖、配置babel.config.js、创建tsconfig.json文件、使用@别名引入src文件夹下的文件,并展示了效果图

前言

本文基于

“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"]
}