解决 React Native 中导入的 src 目录问题

Question

如何配置React Native以相对于src目录导入文件？ 换句话说，我想写import Foo from 'components/foo'而不是import Foo from '../../components/foo'。

使用webpack时可以像这样进行配置。但是，使用React Native packager时，我没有找到这样做的方法。

- henkimon

Answer 1

我还没有找到一种让您按照自己想要的方式导入的解决方案，但是在这个主题中有几个配置导入位置的建议。

我最喜欢的解决方案

（适用于任何JavaScript项目，不仅限于React Native，并且可以编写非常短的路径来引用文件。）

在src/目录中创建一个package.json文件，其内容如下：

{
    "name": "src"
}

这句话的意思是：这个文件夹是一个名为src的包。然后你可以通过在包的名称后面简单地添加其位置（相对于package.json所在的目录）来导入该包中的任何文件/目录：

import Foo from 'src/components/foo';

另一种解决方案

在任何React Native项目中，您可以执行：

import Foo from 'MyApp/src/components/foo';

其中MyApp是您在index.ios.js和index.android.js文件中注册的任何名称。

应用程序名称是使用AppRegistry方法之一进行注册的，例如：

AppRegistry.registerComponent('MyApp', () => AppRootComponent);

- ArneHugo

Answer 2

一个好的解决方案是在转译之前，使你的 babel 解析所有逻辑路径。你可以通过将 babel-plugin-root-import 添加到你的节点依赖项中，并更改你的 .babelrc 文件来实现这一点，类似于下面的代码：

"plugins": [
["babel-plugin-root-import", {
  "rootPathSuffix": "src"
}]
]

现在您可以像这样在src中引用所有组件。

import Component from '~/business/ComponentExample'

- Wellyngton

---

我以前用过这个，所以我不记得为什么我不能使用这个解决方案（也许当时它不能与React Native一起使用）。现在你能在React Native项目中做到这一点吗？ - ArneHugo