react-native 相對項目路徑導入組件

在使用react-native的時候，經常要自定義很多組件，但是只能使用../../../的方式，經常不記得這是多深，那有沒有一種方案和vue一樣，在webpack中配置簡寫路徑，在引入的時候，直接使用，本人猜測，當然也可以給項目添加config.js文件，進行配置，但是沒有進行實戰，下面給出我比較喜歡的一種方法和網絡上比較查找比較多的一種方案：

一、我認為最簡單也是最喜歡的一種方案

直接在你想要引入的目錄里面加上一個 package.json：

例如你想引入utils里面的文件，不想../../../....，這樣引入，而是想@utils/.....這樣引入，那么你就可以在utils文件中放一個package.json，里面如下：

{
     name:"@utils"
}

其他同理，本人認為是最簡單，最實用的方案。

二、這種方案是在搜索中，出現頻率最多的

就是安裝 babel-plugin-root-import

npm install babel-plugin-root-import --save-dev

或

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

增加一個.babelrc在項目根目錄，並寫入(如果已有，則加入plugins)：

{
  "plugins": [
    ["babel-plugin-root-import"]
  ]
}

【注意：】

已有項目，記得清理一個緩存(先關閉所有控制偵聽程序)

watchman watch-del-all
npm start -- --reset-cache

【自定義根路徑前綴 】

如果你想把src/js作為項目根入口，你可以修改.babelrc為以下內容：

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src/js"
    }]
  ]
}

如何你想修改項目的默認根入口別名，默認~

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathPrefix": "@"
    }]
  ]
}

也可以定義多組別名入口

{
  "plugins": [
    ["babel-plugin-root-import", [{
      "rootPathPrefix": "~", // `~` 默認
      "rootPathSuffix": "src/js"
    }, {
      "rootPathPrefix": "@",
      "rootPathSuffix": "other-src/js"
    }, {
      "rootPathPrefix": "#",
      "rootPathSuffix": "../../src/in/parent" //也支持父級路徑
    }]]
  ]
}

// 然后你就可以這樣使用插件了。
import foo from '~/my-file';
const bar = require('@/my-file');

原文鏈接：

　　https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1

　　https://blog.csdn.net/dounine/article/details/78328124