从 React Native 从共享文件夹导入

Question

我正在创建一个 monorepo 来保存我的 React 网络应用程序和我的 React Native 应用程序，因为它们共享很多通用代码。

我试图获得的设置是：

Project  
|  
+-- web  
+-- native  
----|------ file.js (should be able to import from 'shared/file2.js')  
+-- shared  
----|------ file2.js  
----|------ package.json (with name="shared")  
+-- package.json

从下面这个 post：https://blog.callstack.io/a-cure-for-relative-requires-in-react-native-2b263cecf0f6#.4g1o5inru 我添加了一个 package.json 文件到共享文件夹：

{ "name": "shared" }

我正在从根文件夹中的 package.json 启动我的本机应用程序，如下所示：

"start-native": "./native/node_modules/react-native/packager/packager.sh"

但由于某种原因，我收到以下错误：

知道我做错了什么或如何从上游的共享文件夹导入我的 RN 应用程序中的文件吗？

编辑：
有几个细节忘记说了。
给我错误的行是（假文件名...）：

// in native/file.js  
import { aFunctionName } from 'shared/file2'

还尝试在根级别的 package.json (name=proj-root) 中添加名称并导入，如：

import { aFunctionName } from 'proj-root/shared/file2'

谢谢！
乌里

Answer 1

要在 Web 和本机之间共享代码，您应该更改构建文件夹的方式。

首先从一个新项目开始 react-native init myProject 这将为 RN 应用程序创建默认结构。

myProject  
|  
+-- android
+-- ios
+-- index.android.js
+-- index.ios.js
...

现在为网络和共享代码创建特定文件夹。

myProject  
|  
+-- android
+-- ios
+-- index.android.js
+-- index.ios.js
+-- web
+-- shared
----|------ index.js 
...

shared/index.js

function hi() {
    return 'hi';
}

module.exports = {
    hi: hi
};

index.ios.js

import { hi } from './shared/';

Answer 2

我最终更改了@diegopartes 回答中所述的文件夹结构。

此外，我想实现能够从我的网络和移动目录中使用绝对路径从共享文件夹导入的效果。

为此我做了以下工作：

网络
我将 webpack.config.js 移动到应用程序的根文件夹。在 webpack.config.js 中，我有以下配置，允许我使用绝对路径导入文件：

const path                = require('path');
const sharedPath          = path.join(__dirname, 'shared');

const config = {
...
resolve: {
    root: [sharedPath],
  },
...
}

现在我的共享文件夹充当根文件夹。意思是，如果我有

- shared  
-- reducers  
-- actions  
--- todos.js

我可以做一个import { addTodo } from 'actions/todos'

手机

这里我用了this post，基本上是说：

无论您希望能够从哪个文件夹以根目录导入，请添加一个带有 { "name": "FOLDER_NAME" } 的 package.json 文件。因此，为了实现与网络应用程序中相同的导入：

- shared  
    -- reducers  
    -- actions  
    --- todos.js
    --- package.json

其中 package.json 内容为：

{
  "name": "actions"
}

现在我可以从我的移动应用程序文件中执行与在 Web 应用程序中相同的导入操作。

编辑

关于 node_modules，我对 Web 和移动设备使用相同的 package.json。在我的 webpack.config 中，我有一个包含所有 React Native 包的数组，这些包被排除在我的供应商包文件之外。

Answer 3

你考虑过提升node_modules吗？

此外，您可以使用 lerna 来实现您想要的，而不是自行编写解决方案。

从 React Native 从共享文件夹导入

Importing from shared folder from react native

import

reactjs

package.json

react-native