My favorite solution

Question

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

使用webpack时，可以配置为this。 React Native packager我找不到办法。

Answer 1

我还没有找到一个解决方案，让您完全按照自己的方式导入，但有几个建议如何在this thread中配置导入位置。

（适用于任何JavaScript项目，而不仅仅是React Native，让您编写非常短的路径来引用文件。）

在package.json目录中使用以下内容创建src/：

{
    "name": "src"
}

这是做什么的：这个文件夹是一个名为src的包。然后，您只需在包名称后添加它的位置（相对于package.json所在的目录），即可导入该包中的任何文件/目录：

import Foo from 'src/components/foo';

Another solution

在任何React Native Project中，您可以执行以下操作：

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

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

使用AppRegistry方法之一注册应用名称，例如

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

Answer 2

一个好的解决方案是让你的babel在它转变之前解决所有逻辑路径。您可以通过将babel-plugin-root-import添加到节点依赖项并更改您的.babelrc来实现此目的，类似于以下代码：

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

现在你可以像这样引用src里面的所有组件

import Component from '~/business/ComponentExample'