Javascript 在主目录外响应本机导入文件

我正在尝试使用

Expo

和

react native

为一些组件制作一个演示应用程序。（或者我也可以使用常规的

React Native

）

我的问题是我无法在演示应用程序之外导入文件

这是我的结构

|--组成部分/
||--libs
||--node_模块
||--index.js
||--package.json
||——演示/
|| |--node|u模块
|| |--App.js
|| |--package.json

在

demo/App.js

中，我试图从上面的目录中导入一个组件，但没有成功。所有组件都在./index.js中导出

在

App.js

中，我尝试了：

import{MyComponent}来自'Components'

，

import{MyComponent}来自'../index'

，或者

import{MyComponent}来自'../Components/'

但似乎都不起作用

我发现以下类型的错误

目录/Users/kevin/web/myprojects/Components/index不存在

---

我做错了什么？

按照react native packager目前的工作方式，在创建JavaScript捆绑包时，它只会扫描项目的根和下面的根，因此这将非常困难

您基本上只需要将文件放在目录的根目录下。有一些工具可以将文件从另一个目录同步到根目录下的一个目录中，因此如果确实需要，可以使用其中的一个

一些人正在研究使符号链接与此配合使用的方法。值得注意的是，您可能会看到Callstack中的Haul。

---

但这还没有集成到Expo中。

您可以在demo文件夹中创建一个rn cli.config.js文件，并添加以下代码：

var path = require("path");
var config = {
    watchFolders: [
     path.resolve(__dirname,"../"),
    ]
}
module.exports = config;

参考：

---

运行

react native run android

或

react native start

后，如果您看到，它工作了。

查看Metro配置，其中配置了

监视文件夹。而且根据它的规格是你想要的

监视文件夹

类型：数组

指定任何其他（到projectRoot）监视文件夹，这用于知道要监视哪些文件

检查以下链接：


小心！
正如我在问题中指出的，您有2个
node\u模块
文件夹

拥有多个
node_模块
可能会破坏metro的编译

要解决这种情况，请查看metro配置中的
resolver.extraNodeModules
配置

您可以将根文件夹转换为本地npm包

在根文件夹中，打开
package.json
在
package.json
运行
npm包
复制终端末尾给出的gz tarball名称
打开你的
App.js的目录

运行
npm安装../NAME\u您复制的\u TARBALL\u
在文件中，从'NAME_In_PACKAGE.JSON'导入{MyComponent}

---

尝试显式解析App.js中的路径。添加此行并再次检查：app.use（'/Components'，express.static（uu dirname+'/Components/）；谢谢，但我不是在用

express

，我是在用[谢谢你的解释，我担心我会遇到这种情况。我会看看我能做些什么。如果你有一个web应用程序和一个本地应用程序共享一些共同的代码，这真的很糟糕。你不得不依赖同一版本的react，当与其他依赖项出现版本控制问题时，它可能会陷入一个不可能的绑定s、 我刚被这个咬了。有什么办法吗？我被这个咬了too@MohamedElMahallawy：的作者提供了可能的解决方案。搜索“符号链接”在该页面中找到它。它基本上涉及在已更改的顶级.js文件上触发babel转换，然后将其复制到react本机应用程序可访问的目录中。另一个解决方案是：通读（很长）问题。它提供了很多建议。对react native 0.60+不起作用。请检查Renan的答案。