在React Native中如何避免相对路径导入的问题？

Question

我是从Vue背景转到React Native的新手，React中我讨厌的一件事是必须在我的组件中使用相对路径导入。我发现自己需要做如下操作：

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

如果我的文件夹结构更改，那么我就必须在所有使用该组件的组件中进行搜索和替换，这不好，容易陷入开发地狱。

像使用节点模块一样使用绝对路径是可能的吗？有没有可以使用别名或类似功能的库？使用Vue，我可以在app.js中导入我的组件，例如Vue.component('home-screen ...)，然后无需导入即可使用它们。

- gabogabans

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/*"]
    }
  }
}

- Steven Bell

Answer 2

简单方法

在重要的目录中添加一个 {"name":"<prefix>"} 的 package.json，类似于 monorepo。

如果您这样做，您可能也可以考虑将其作为完整的 monorepo，因为几乎没有额外的工作。

极其复杂的方法

这种方法更适合使用像 webpack 解析器等工具。

在根目录下创建一个名为 metro.config.js 的文件，并添加以下内容：

module.export = {
    resolver: {
        resolveRequest: (
            context: ResolutionContext,
            moduleName: string,
            platform: string | null
        ) => {
            //...
            return Resolution;
        }
    }
}

解析上下文

解析上下文是一个对象，它保存正在运行的解析的属性，最重要的是originModulePath，它是要求模块的路径。

解析

解析是以下任一对象：

1. { type: "empty" } 用于空源
2. { type: "sourceFile", filePath: string } 用于JS、JSON等文件
3. { type: "assetFiles", filePaths: string[] } 用于任何其他类型（例如不可编译的metro）

对于这个方法，我建议查看metro-resolver的类型，因为这个方法的文档非常糟糕。

- Elias Schablowski