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代码注意事项：这有效，但要注意您可能会丢失智能感知和cmd / ctrl +点击。感谢Johan提供有关CS代码的信息

Answer 2

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

e.g：

- 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，这里有一些正在进行的门票：

这可能有助于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')。

Answer 4

补充@Tiagojdferreira

您可以将他的解决方案与babel-plugin-module-resolver库一起使用。

安装时：

npm install --save-dev babel-plugin-module-resolver

配置.babelrc添加插件属性，如下所示：

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@src": "MyApp/src",
        "@otherAlias": "MyApp/src/other/path",
      }
    }]
  ]
}

用法：

require('@src/utils/moment-twitter');

希望这有帮助！

Answer 5

您可以在本机中使用全局变量，与节点相同，全局定义的属性可以全局访问。

e.g。

global.foo = "blah";
console.log(foo); //logs "blah"

上述要点中的大多数节点解决方案都应正常工作。

我过去使用的是在顶级目录级别定义一个全局函数，通常在第一行如

global.rootRequire = function(path) { return require(path); }

它允许深层嵌套的需求来自root，并避免所有../../业务。

然而另一条评论是正确的，如果这确实是一个问题，那么该项目可能存在结构性缺陷。

React-Native的本地require（）路径

5 个答案: