React-Native的本地require()路径

Question

我正在寻找一种方便的方法来访问我的应用程序的根目录中的文件,同时避免使用如下所示的require()字符串:

require('../../../../myModule')

Node(https://gist.github.com/branneman/8048520)有一些很好的解决方案,但我还没有看到在React Native中使用全局变量的方法.

有没有人有这个问题的清洁解决方案？

Answer 1

来自Marc Shilling在https://github.com/facebook/react-native/issues/3099上的回答

您可以在导入/要求上使用绝对路径:

import {ProximaNovaText} from 'MyApp/src/components'; require('MyApp/src/utils/moment-twitter');

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

VS Code的注意事项:这有效,但要注意您可能会丢失intellisense和cmd/ctrl + click.感谢Johan提供有关CS代码的信息

Answer 2

您可以通过package.json在要解析的根目录中添加目标来将目录标记为包.

例如:

- app
    - package.json     // ? Add this package.json file
    - config
    - components
    - ... (etc)

package.json 应该是这样的:

{ "name": "app" }

重启你的打包者

react-native start --reset-cache

现在,您可以在所有项目文件中使用以下内容:

import store from 'app/config/store';
import Button from 'app/components/Button';

您可以在项目中的其他目录中使用相同的方法,我认为这require不起作用,尽管图像路径似乎有效.

如评论中所述,您可能会在编辑器中失去自动完成功能(VSCode).

对于Jetbrains IDE,这里有一些正在进行的门票:

• https://youtrack.jetbrains.com/issue/WEB-17254
• https://youtrack.jetbrains.com/issue/WEB-20104#comment=27-1486526
• https://intellij-support.jetbrains.com/hc/en-us/community/posts/205434510-Configure-custom-modules-resolve-folder

这可能有助于Jetbrains IDE同时使用.

// A slash may allow auto-complete to work in your IDE (but will fail to resolve)
import Button from '/app/components/Button'; // Cannot be resolved

Answer 3

将代码放在您的myModule文件顶部:

/**
 * @providesModule myModule
 */

然后您可以require('myModule')在任何其他文件中使用.