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