react native配置路径别名alias过程

更新时间：2026年03月15日 10:27:20 作者：好巧.

文章介绍了如何在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"]
}

4.使用

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

5.效果图

yarn android

总结

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用React实现虚拟列表的示例代码
虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。本文就将利用React实现虚拟列表，需要的可以参考一下
2022-08-08
详解React中常见的三种路由处理方式选择
这篇文章主要为大家详细介绍了React中常见的三种路由处理方式该如何选择,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
详解Webpack+Babel+React开发环境的搭建的方法步骤
本篇文章主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
React倒计时功能实现代码——解耦通用
这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
React八大常见错误及其解决方案
这篇文章主要介绍了React八大常见错误及其解决方案,并通过代码示例介绍的非常详细,对大家学习react有一定的帮助,感兴趣的朋友可以参考下
2024-03-03
react中路由跳转及传参的实现
本文主要介绍了react中路由跳转及传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
React jsx转换与createElement使用超详细讲解
这篇文章主要介绍了React jsx转换与createElement使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-11-11
useCallback和useMemo的正确用法详解
这篇文章主要为大家介绍了useCallback和useMemo的正确用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React新扩展函数setState与lazyLoad及hook介绍
这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-12-12
详解如何在React中执行条件渲染
在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨如何在React中实现条件渲染,并通过示例代码演示常见的用法,需要的朋友可以参考下
2025-01-01