避免反应原生中的相对路径导入地狱？

Question

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

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

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

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

Answer 1

您可以添加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/*"]
    }
  }
}