react-native 相对项目路径导入组件

在使用react-native的时候，常常要自定义不少组件，可是只能使用../../../的方式，若是目录多了一长串，书写很烦，看着也很差看。

 

方法一：

例如你想引入utils里面的文件，不想../../../....，这样引入，而是想@utils/.....这样引入，那么你就能够在utils文件中放一个package.json，里面以下：

{
    "name": "@utils"
}

而后就能够引用了

import { connect } from '@utils/utils/dva';

 

方法二：

babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中能够配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件容许你添加新的“根”目录，这些目录包含你的模块。它还容许您设置一个自定义别名目录，具体的文件，甚至其余NPM模块。

yarn add babel-plugin-module-resolver

而后配置项目根目录的.bablerc文件:

{
  "plugins": [
    ["module-resolver", 
       {
         "root": ["./"],
         "extensions": [".js"],
         "cwd":"babelrc",
         "alias": {
           "@":"./app/"
         }
      }
    ]
  ]
}

而后就能够根据 设置的别名 @ 方式引入本身要用的资源了组件了，例如：

import Index from '@/components/index/index.js';
import { WIDTH } from '@/config/base';

root：一个字符串或根目录的数组。指定路径或全局路径（例如./src/**/components）

alias：别名的配置。也能够别名node_modules依赖关系，而不单单是本地文件。

extensions：解析器中使用的扩展数组。覆盖默认扩展名（['.js', '.jsx', '.es', '.es6', '.mjs']）。

cwd：默认状况下，工做目录是用于解析器的工做目录，可是您能够覆盖您的项目。
自定义值babelrc将使插件根据要解析的文件查找最接近的babelrc配置。
自定义值packagejson将使插件查找最接近package.json的文件解析。

transformFunctions：将会变换其第一个参数的函数和方法的数组。默认状况下，这些方法是：require，require.resolve，System.import，jest.genMockFromModule，jest.mock，jest.unmock，jest.doMock，jest.dontMock。

resolvePath(sourcePath, currentFile, opts)：为文件中的每一个路径调用的函数。默认状况下，模块解析器使用一个内部函数，以下所示：import { resolvePath } from 'babel-plugin-module-resolver'。该opts参数是经过babel配置经过选择对象。