没有设置路径别名之前代码是这样的:

import { px2dp } from '../../utils/screenKits';

路径相当冗长,看着就头疼。增加了路径别名之后,变成这样

import { px2dp } from '~/utils/screenKits';

心里清爽多了!

具体操作见下文,实操性强!

安装插件

这里我选用 babel-plugin-root-import插件,主要是方便,不需要再为了 eslint 不识别 '@' 而增加配置。

这个babel-plugin-module-resolver插件,也可以,但是需要处理 eslint 的配置

yarn add babel-plugin-root-import --dev

修改babel.config.js

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }], // mbox
// ['react-native-reanimated/plugin'],
[
'babel-plugin-root-import',
{
paths: [
{
rootPathSuffix: './src',
rootPathPrefix: '~/', // 使用 ~/ 代替 ./src (~指向的就是src目录)
},
{
rootPathSuffix: './src/utils',
rootPathPrefix: '!/',
},
],
},
],
],
};

修改import路径测试

清除rn缓存并重新启动项目

yarn clear-run
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "npx eslint --ext .js,.jsx,.ts,.tsx ./src",
"lint:fix": "npx eslint --fix .",
"check": "lint-staged",
"format": "prettier --write 'src/**/*.js'",
"prettier": "npx prettier --write .",
"prepare": "husky install",
"clear": "yarn cache clean",
"clear-run": "react-native start --reset-cache",
"del": "rimraf node_modules yarn.lock"
},

可以看到项目可以正常启动、正常运行

修复函数跳转到定义功能

配置vscode: https://code.visualstudio.com/docs/languages/jsconfig

再项目根目录增加 jsconfig.json 文件

{
"compilerOptions": {
"baseUrl": ".", // 基础目录
"paths": { // 指定相对于 baseUrl 选项计算的路径映射, 别名路径也可以跳转
"~/*": [
"src/*"
]
}
}
}

这个配置是针对编辑器的,不用重启项目,配置即生效


我是 甜点cc

公众号:【看见另一种可能】

React Native项目设置路径别名的更多相关文章

  1. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  2. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  3. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  4. 安装android Studio和运行react native项目(基础篇)

    ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...

  5. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

  6. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  7. React Native App设置&Android版发布

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  8. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  9. react native项目启动需要做的操作

    一.启动: 1.查看端口(默认8081是否被占用) netstat -ano   可以查看所有的进程 2.netstat -ano | findstr "8081"  查看某个端口 ...

  10. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

随机推荐

  1. CSS 高阶小技巧 - 角向渐变的妙用!

    本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: ...

  2. Vue 相关整理

    一 谈谈对 keep-alive 的了解? keep-alive 是Vue内置的一个组件,可以使被包含的组件保留状态,避免重新渲染,其有以下特性: * 一般结合路由和动态组件一起使用,用于缓存组件: ...

  3. linux服务器qps查询,查看当前linux服务器的QPS

    https://blog.csdn.net/weixin_42119281/article/details/116595205 QPS:每秒查询率(QPS,Queries-per-second)是对一 ...

  4. vue中关于对象的监听与数组的监听

    数组: 数组可监听到的方法:'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' 如果是根据索引改变值,需要使用vue.$set ...

  5. jQ-DOM属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 把一个列表拆成N个子列表的四种方法

    编程的方法往往不止一种,比如怎么把一个Python种的列表拆成N个子列表,我们可以很容易找到N种方法,也许这就是编程的魅力所在. 一.列表表达式法 这种方法最为简洁,不过可读性差一些 这个方法中,即使 ...

  7. 一些随笔No.3

    1.开发应以业务为导向,技术只是手段 2.视觉上和程序上不一定是完全符合 比如,我所说的阻塞是视觉层面,或者是对用户而言的阻塞,而不是程序意义上的.我也许会传完参的同时销毁原组件,生成一个看起来一模一 ...

  8. 【过滤器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern),是一种结构型模式.这种模式允许使用不同的标准条件来过滤一组对象,并通过逻辑运算的方式把各条件连接起来,它 ...

  9. [Linux]常用命令之【du/fdisk/df/ls】#磁盘管理/文件管理#

    本文的经典应用场景: 1.查找占用磁盘存储空间最大的目录/文件 2.关于[磁盘分区]的相关概念和实操,详见另一博文:[Linux]磁盘分区 - 博客园/千千寰宇 1 fdisk fdisk := &q ...

  10. 3D开发工具HOOPS最新解析合集!助力实现web端高性能模型渲染!

    一.3D技术为创新提供强大助力(1)3D专家提供专属技术支持服务不管您想搭建桌面.WEB或者移动端APP应用,技术领先全球的HOOPS Platform组件都可以为您提供弹性的3D集成架构,同时,一批 ...