快捷導(dǎo)航

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

更新時間：2023年05月23日 08:50:04 作者：甜點(diǎn)cc

這篇文章主要為大家介紹了React?Native項(xiàng)目設(shè)置路徑別名實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

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

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

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

心里清爽多了！

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

安裝插件

這里我選用 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緩存并重新啟動項(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)目可以正常啟動、正常運(yùn)行

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

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

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

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

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

您可能感興趣的文章: