时间戳

首页 > 解决方案 > 在 react-native 中避免相对路径导入地狱？

javascript - 在 react-native 中避免相对路径导入地狱？

问题描述

我是来自 vue 背景的 react-native 新手，我讨厌 react 的一件事是必须在我的组件中使用相对路径导入，我发现自己在做类似的事情：

import HomeScreen from '../../components/screens/HomeScreen'

如果我的文件夹结构发生变化，这意味着我将不得不在所有使用该组件的 m 组件中进行搜索和替换，这并不酷而且容易成为开发者地狱。

是否可以像节点模块一样使用绝对路径，是否有一个库可以使用别名或类似的，使用 vue 我可以在 app.js 中导入我的组件，如 Vue.component('home-screen ...) 和我可以使用它们而无需导入。

标签： javascriptreactjsreact-native

解决方案

您可以package.json使用名称键添加文件

{
  "name": "@components"
}

在任何文件夹中，metro 都会识别它。

然后您可以导入为@components/screens/HomeScreen

如果您使用的是 vscode，则可以将 jsconfig.json 文件添加到项目根目录以启用导入自动完成功能。

这是我的：

{
  "compilerOptions": {
    "baseUrl": "",
    "paths": {
      "@components/*": ["src/components/*"],
      "@helper/*": ["src/helper/*"],
      "@actions/*": ["src/actions/*"],
      "@constants/*": ["src/constants/*"],
      "@primitives": ["src/primitives/index.js"],
      "@graphql": ["src/graphql/index.js"],
      "@services/*": ["src/services/*"],
      "@assets/*": ["assets/*"]
    }
  }
}

推荐阅读