React-Native的本地require()路径

时间:2015-05-04 21:46:13

标签: javascript reactjs react-native

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

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

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

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

5 个答案:

答案 0 :(得分:15)

来自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代码的信息

答案 1 :(得分:8)

您可以通过在要解析的根目录中添加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

答案 2 :(得分:6)

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

/**
 * @providesModule myModule
 */

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

答案 3 :(得分:3)

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

希望这有帮助!

答案 4 :(得分:0)

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

e.g。

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

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

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

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

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

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