详解React Native中如何使用自定义的引用路径

目录
  • RN的相对路径地狱
  • RN的自定义路径需要的依赖
  • 解决自定义引用路径导致的eslint报错问题

RN的相对路径地狱

我刚接触RN时，就发现所有的demo中给出来的路径都是相对路径，我自己的练习项目中想改成自定义的绝对路径，但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了。伴随着RN的学习和开发练习，我的代码也变得越来越多，越来越复杂，我逐渐发现RN的相对路径越来越麻烦，比如我把某个文件移动到另一个不同深度的文件夹中，那么就需要把所有引用这个文件的地方都改一遍。请看下面这些例子，这些小点点，晃得我眼晕。

import { deviceInfo } from '../../utilities/device'
...
import { API, DEV } from '../../../config/api'
...
import { Headers } from '../../widgets/nav'
...
import { basic } from '../../styles/theme'
...

RN的自定义路径需要的依赖

作为前端开发时熟悉的webpack.config.js，在RN的脚手架中并没有看到，但是要知道，webpack.config.js里用来自定义import路径的resolve.alias最终目的也是让babel在翻译代码时，能够找到正确的路径。所以RN里想用自定义的引用路径，还得靠babel的配置才行。

  • 安装依赖babel-plugin-module-resolver
yarn add babel-plugin-module-resolver -D
  • 配置babel.config.js
plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        extensions: ['.js', '.jsx'],
        root: ['.'],
        alias: {
          utilities: './src/utilities',
          config: './src/config',
          widgets: './src/widgets',
          styles: './src/styles'
        }
      },
    ],
  ]
  • 配置jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utilities": ["./src/utilities/*"],
      "config": ["./src/config/*"],
      "widgets": ["./src/widgets/*"],
      "styles": ["./src/styles/*"],
    }
  }
}

RN脚手架默认的情况下，是没有这个文件的，需要自己新建。

  • 把相对路径都改成自定义引用
import { deviceInfo } from 'utilities/device'
...
import { API, DEV } from 'config/api'
...
import { Headers } from 'widgets/nav'
...
import { basic } from 'styles/theme'
...
  • 重启
yarn start

此时我发现，自定义的路径并没有起作用，Metro报错说找不到路径。因为我的所有React组件的定义，都是以jsx为文件后缀的。我在项目里使用了eslint-plugin-react这个eslint插件，它的推荐规则就是要React的组件的文件后缀为jsx。当我把文件后缀改成js后，代码就能正常运行了。

我觉得文件后缀为jsx的情况下，jsconfig.js也能通过某种方式起作用，可惜我现在还不知道。

解决自定义引用路径导致的eslint报错问题

如果你使用了eslint-plugin-react，那么当你用js作为React组件的文件后缀时，eslint会报错。为了解决自定义引用路径问题，我只能牺牲掉这条eslint的rule。在.eslintrc.js加上这一条rule，就可以解决掉它。

rules:[
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx']}]
]

如果你使用了airbnb或者单独引用了eslint-plugin-import，那么当你利用babel-plugin-module-resolver成功解析了自定义引用路径的同时，eslint就会因为无法找到这些路径而报错。因为涉及到整个项目的所有文件，不可能在文件里简单的ignore某个rule来消除错误，而是需要在.eslintrc.js里覆盖eslint-plugin-import的import/no-unresolved这条rule才行。

rules:[
    'import/no-unresolved': [2, { ignore: ['^utilities', '^config', '^widgets', '^styles']}]
]

至此，解决了自定义引用路径问题，同时避免了eslint的报错。

以上就是详解React Native中如何使用自定义的引用路径的详细内容，更多关于React Native自定义引用路径的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React Native 的动态列表方案探索详解

    React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • react-native 实现渐变色背景过程

    react-native 实现渐变色背景过程

    目录 react-native 渐变色背景 react-native学习记录 滚动条 轮播图示例 渐变色 ScrollableTabView默认页面 ScrollableTabView背景颜色 ScrollableTabView选中颜色 ScrollableTabView未选中颜色 react-native 渐变色背景 使用react-native-linear-gradient插件 1.安装 npm react-native-linear-gradient 2.链接 react-native

  • 使用react-native-image-viewer实现大图预览

    使用react-native-image-viewer实现大图预览

    目录 react-native-image-viewer大图预览 先看一个实现的效果 实例 下面是一个简单的实例代码 Props react-native-image-viewer大图预览 在移动开发中,特别是涉及到图片的应用开发中,经常会遇到图片预览等功能,并且预览支持图片的放大和缩小,在Android原生开发中可以使用PhotoViewPager库实现,如果在React Native中,可以选择使用react-native-image-viewer. 先看一个实现的效果 实例 使用前需要先安

  • 最新版React Native环境搭建(亲测)

    最新版React Native环境搭建(亲测)

    目录 一.基础环境 1.1 安装Node.js 1.2 添加Android原生环境 1.3 添加iOS原生环境 二.创建示例项目 2.1 创建项目 2.2 运行项目 2.3 调试项目 三.集成到原生应用 3.1 集成到原生Android应用 3.2 集成到原生iOS应用 工欲善其事,必先利其器.搭建React Native开发环境,需要安装以下辅助工具. Node.js:React Native需要借助Node.js来创建和运行JavaScript代码. 原生开发工具及环境:React Nati

  • React Native可复用 UI分离布局组件和状态组件技巧

    React Native可复用 UI分离布局组件和状态组件技巧

    目录 引言 包装 Context.Provider 作为父组件 使用 Context Hook 来实现子组件 使用 React 顶层 API 动态设置样式 复用 Context,实现其它子组件 抽取共同状态逻辑 自由组合父组件与子组件 示例 引言 单选,多选,是很常见的 UI 组件,这里以它们为例,来讲解如何分离布局组件和状态组件,以实现较好的复用性. 假如我们要实现如下需求: 这类 UI 有如下特点: 不管是单选还是多选,都可以有网格布局,我们可以把这个网格布局单独抽离出来,放到一个独立的组件

  • 使用react-native-doc-viewer实现文档预览

    使用react-native-doc-viewer实现文档预览

    目录 react-native-doc-viewer文档预览 具体步骤如下 react-native初体验的总结 一.前提知识点 二.开发前后相关的一些配置 三.开发项目中用到的知识 四.ui库 五.项目搭建 六.根据需要安装对应依赖 七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r

  • React Native 中实现倒计时功能

    React Native 中实现倒计时功能

    目录 正文 首次实现 最终实现 示例 正文 在 React Native,该如何实现一个倒计时功能呢? 首次实现 表面看来很简单,譬如像下面这样: const timer = useRef<ReturnType<typeof setInterval> | null>(null) const [count, setCount] = useState(0) const start = () => { setCount(10) timer.current = setInterval

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • 详解React 16 中的异常处理

    详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式

    详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式

    方式1. 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config如下图: 可以看到路径为D:\Users--找到此路径修改jupyter_notebook_config.py文件 打开此文件找到 ## The directory to use for notebooks and kernels. #c.NotebookApp.notebook_dir = '' 将其改为 ## The directory to use for noteboo

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • 详解React native fetch遇到的坑

    最近在自学react native,学习过程中遇到了不少的坑,下面将针对登录这一功能来详细介绍一下以下遇到的两个问题. 1.在请求数据的时候,一般情况下我们会直接提交Content-type是json数据格式的请求.类似 fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },

  • 详解React Native 屏幕适配（炒鸡简单的方法）

    前言 React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕)的问题,下面介绍一种几行代码搞定 RN 适配的方法! 屏幕适配的前置知识 RN 中的尺寸单位为 dp,而设计稿中的单位为 px 原理 虽然单位不同,但是元素所占屏幕宽度的比例是相同的 利用元素所占屏幕比例不变的特性,来将 px 转为 dp(这样实现屏幕适配的话,在不同尺寸的屏幕下,元素会等比放大或缩小) 公式如下: 设计

随机推荐