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

Posted 2021-05-04

我正在尝试使用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

我究竟做错了什么 ？

答案

反应原生包装器现在的工作方式，它只是在创建javascript包时扫描项目的根和下面，所以这样做真的很难。

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

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

另一答案

您可以在demo文件夹中创建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，它就可以了。