欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React?Native項(xiàng)目設(shè)置路徑別名示例

 更新時(shí)間：2023年05月23日 08:50:04   作者：甜點(diǎn)cc  
這篇文章主要為大家介紹了React?Native項(xiàng)目設(shè)置路徑別名實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

沒(méi)有設(shè)置路徑別名之前代碼是這樣的：

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

路徑相當(dāng)冗長(zhǎng)，看著就頭疼。增加了路徑別名之后，變成這樣

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

心里清爽多了！

具體操作見(jiàn)下文，實(shí)操性強(qiáng)！

安裝插件

這里我選用 babel-plugin-root-import插件，主要是方便，不需要再為了 eslint 不識(shí)別 '@' 而增加配置。

這個(gè)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路徑測(cè)試

清除rn緩存并重新啟動(dòng)項(xiàng)目

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"
},

可以看到項(xiàng)目可以正常啟動(dòng)、正常運(yùn)行

修復(fù)函數(shù)跳轉(zhuǎn)到定義功能

配置vscode： https://code.visualstudio.com/docs/languages/jsconfig再項(xiàng)目根目錄增加 jsconfig.json 文件

{
  "compilerOptions": {
    "baseUrl": ".", // 基礎(chǔ)目錄
    "paths": { //  指定相對(duì)于 baseUrl 選項(xiàng)計(jì)算的路徑映射, 別名路徑也可以跳轉(zhuǎn)
      "~/*": [
        "src/*"
      ]
    }
  }
}

這個(gè)配置是針對(duì)編輯器的，不用重啟項(xiàng)目，配置即生效

以上就是React Native項(xiàng)目設(shè)置路徑別名示例的詳細(xì)內(nèi)容，更多關(guān)于React Native路徑別名的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • React 小技巧教你如何擺脫hooks依賴煩惱

    React 小技巧教你如何擺脫hooks依賴煩惱

    Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們?cè)试S你無(wú)需類就使用 React，本文帶領(lǐng)大家學(xué)習(xí)React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧
    2021-05-05
  • React組件之間的通信的實(shí)例代碼

    React組件之間的通信的實(shí)例代碼

    本篇文章主要介紹了React組件間通信的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法

    react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法

    這篇文章主要介紹了react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法,全稱為Node Package Manager，是隨同NodeJS一起安裝的包管理工具，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-08-08
  • JavaScript React如何修改默認(rèn)端口號(hào)方法詳解

    JavaScript React如何修改默認(rèn)端口號(hào)方法詳解

    這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號(hào)方法詳解，文中通過(guò)步驟圖片解析介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 詳解React中key的作用

    詳解React中key的作用

    這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
    2021-04-04
  • React commit源碼分析詳解

    React commit源碼分析詳解

    前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過(guò)程源碼
    2022-11-11
  • react框架next.js學(xué)習(xí)之API?路由篇詳解

    react框架next.js學(xué)習(xí)之API?路由篇詳解

    這篇文章主要為大家介紹了react框架next.js學(xué)習(xí)之API?路由篇詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • React如何通過(guò)@craco/craco代理接口

    React如何通過(guò)@craco/craco代理接口

    這篇文章主要介紹了React如何通過(guò)@craco/craco代理接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React Hook 父子組件相互調(diào)用函數(shù)方式

    React Hook 父子組件相互調(diào)用函數(shù)方式

    這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 完美解決react-codemirror2?編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問(wèn)題

    完美解決react-codemirror2?編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問(wèn)題

    這篇文章主要介紹了react-codemirror2編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問(wèn)題,解決方法也很簡(jiǎn)單，需要手動(dòng)引入自動(dòng)刷新的插件，配置一下參數(shù)就可以了，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-08-08

最新評(píng)論