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 打包器現在的工作方式是，它只會在創建 JavaScript 包時掃描項目的根目錄和下面的目錄，因此很難做到這一點。

您基本上只需要將文件放在目錄的根目錄下。 有一些工具可以將文件從另一個目錄同步到根目錄下的目錄中，因此如果您確實需要，可以使用其中之一。

有些人正在研究使符號鏈接與此相關的方法。 值得注意的是，您可能會從 Callstack 中查看 Haul。 https://github.com/callstack-io/haul但這還沒有集成到 Expo 中。

Answer 2

查看 Metro 配置， watchFolder配置在那里。 根據它的規格是你想要的！

監視文件夾

類型：數組

指定任何其他（到 projectRoot）監視文件夾，這用於知道要監視哪些文件。

檢查下面的鏈接：

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

當心 ！

正如我在您的問題中指出的，您有 2 個node_modules文件夾

擁有多個node_modules可能會破壞 Metro 的編譯。

要解決這種情況，請查看 Metro 配置中的resolver.extraNodeModules配置。

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

Answer 3

您可以將根文件夾轉換為本地 npm 包...

1. 在根文件夾中，打開package.json
2. 在package.json設置name字段
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 4

您可以在 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 ，如果你看到這個，它就成功了。

Answer 5

您可以嘗試更新metro.config.js (RN 0.69.3)

 const path = require('path');

 module.exports = {
  transformer: {
    getTransformOptions: async () => ({
     transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
    },
  }),
 },
 // options for reading data outside root react-native folder
 projectRoot: __dirname,
 watchFolders: [path.resolve(__dirname, '../')],
};

Merto 配置文檔https://facebook.github.io/metro/docs/configuration#watchfolders