react-naitve 路径引用 优化

问题出发点

`{HMTJH8OIDQZUHB2$ZXLVV.png

在使用 react-native 得时候，经常需要定义很多组件，但引用得时候 只能 ./ ../ ../../ 这种引用方式，很麻烦，语义也不够直观，到这里就开始 思考有没有 一种 方案类似vue 中 webpack中配置好 @ 直接代表 src目录

alias: {
  "@": path.join(__dirname, "src")
}

于是 经过搜索 找到以下解决方案

就是安装 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", {
        "rootPathPrefix": "@",
        "rootPathSuffix": "./src"
      }]
    ]
}

也可以指定多个

{
  "plugins": [
    ["babel-plugin-root-import", [{
      "rootPathPrefix": "~", // `~` 默认
      "rootPathSuffix": "./components"
    }, {
      "rootPathPrefix": "@",
      "rootPathSuffix": "./src"
    }]]
  ]
}

然后 项目中就 可以使用了

import Index from '@/components/tabBars/Index.js';

import Home from '@/views/Home/index.js';

import Video from '@/views/Video/index.js';

import Me from '@/views/Me/index.js';
王浩的博客