React-Native 的本地 require() 路径

Question

我正在寻找一种方便的方法来访问我的应用程序根目录中的文件，同时避免像这样的 require() 字符串：

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

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

有没有人有解决这个问题的干净方法？

Answer 1

你可以在react native中使用全局变量，和node一样，定义在global上的属性可以全局访问。

例如

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

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

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

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

这只允许深度嵌套要求从根开始，并避免了所有 ../../ 业务。

然而，其他评论是正确的，如果这确实是一个问题，则该项目可能在结构上存在缺陷。

Answer 2

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

上的回答

You can use an absolute path on imports/requires:

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

where 'MyApp' is whatever name you registered in your index.ios.js file

VS 代码注意事项：这有效，但请注意，您可能会失去智能感知和 cmd/ctrl + 单击。感谢 Johan 提供有关 CS 代码的信息

Answer 3

将下面的代码放在 myModule 文件的顶部：

/**
 * @providesModule myModule
 */

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

Answer 4

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

例如：

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

package.json 应该是这样的：

{ "name": "app" }

Restart your packager
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 5

补充@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');

希望对您有所帮助！

React-Native 的本地 require() 路径

Local require() paths for React-Native

javascript

reactjs

react-native