主目录之外的React-Native导入文件

Question

我正在尝试使用Expo和react-native为某些组件制作演示应用。 （或者我也可以使用常规React-Native）

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

这是我的结构 |-- Components/ | |-- libs | |-- node_modules | |-- index.js | |-- package.json | |-- demo/ | | |-- node_modules | | |-- App.js | | |-- package.json

在demo/App.js内部，我试图从上层目录导入我的一个组件，但没有运气。所有组件都以./index.js

导出

在App.js内，我试过： import {MyComponent} from 'Components'，import {MyComponent} from '../index'或import {MyComponent} from '../../Components/'，但似乎都没有效果。

我收到以下类型的错误Directory /Users/kevin/web/myprojects/Components/index doesn't exist

我做错了什么？

Answer 1

react-native packager现在的工作方式，它只是在创建JavaScript包时扫描项目的根目录，因此很难做到这一点。

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

有些人正在研究如何使符号链接与此一起工作。值得注意的是，你可以从Callstack看看Haul。 https://github.com/callstack-io/haul 但这还没有纳入世博会。

Answer 2

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

1. 在根文件夹中，打开package.json
2. 在name中设置package.json字段
3. 运行npm pack。
4. 复制终端末尾给出的gz tarball名称。
5. 打开您的App.js的目录
6. 运行npm install ../NAME_OF_TARBALL_THAT_YOU_COPIED
7. 在文件中，执行import {MyComponent} from 'NAME_IN_PACKAGE.JSON'

Answer 3

看一下Metro配置，watchFolder在此处配置。并且根据其规格是您想要的！

  

watchFolders

     

类型：数组

     

指定任何其他（到projectRoot的）监视文件夹，该文件夹用于知道要监视的文件。

检查以下链接：

https://facebook.github.io/metro/docs/en/configuration#watchfolders

小心！

正如我在您的问题中指出的那样，您有2个node_modules文件夹

  

拥有多个node_modules可能会破坏地铁的编译。

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

https://facebook.github.io/metro/docs/en/configuration#extranodemodules

Answer 4

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

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

参考：View options in here

运行react-native run-android或react-native start后，如果看到this，它就可以工作。