从React Native从共享文件夹导入

乌里·克拉尔

我正在创建一个Monorepo来容纳我的React Web应用程序和我的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

从以下这篇文章开始: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应用程序中的文件吗?

EDIT:
A few details I forgot to mention.
The line giving me the error is (fake file names...):

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

Also tried adding a name in the package.json (name=proj-root) in the root level and importing like:

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

Thanks!
Uri

Uri Klar

I ended up changing the folder structure as stated in @diegopartes answer.

In addition, I wanted to achieve the effect of being able to import from the shared folder using absolute paths from both my web and mobile directories.

For this I did the following:

Web
I moved my webpack.config.js to the root folder of the app. Inside webpack.config.js I have the following configuration the allows me to import files using absolute paths:

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

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

now my shared folder acts as a root folder. Meaning, if I have

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

I can do an import { addTodo } from 'actions/todos'

Mobile

在这里,我看了这篇帖子,基本上说:

无论您想从哪个文件夹作为root导入,请使用添加package.json文件{ "name": "FOLDER_NAME" }因此,为了实现与Web应用程序相同的导入:

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

package.json内容在哪里

{
  "name": "actions"
}

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

编辑

关于node_modules,我package.json在网络和移动设备上都使用相同的代码。在我中,webpack.config我有一个所有React Native软件包的数组,这些都从我的供应商捆绑包文件中排除了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法从React Native App中的项目文件夹导入.js文件

使用@访问React Native中的某些文件夹

当前文件夹中的react-native init

React native:安装react-native-maps后不存在android文件夹

如何在React应用程序中从公用文件夹导入文件?

如何从react-native中的Assets文件夹中读取文件?

如何从React Native ios项目中的components文件夹访问js文件

React-native Google Drive如何获取文件和文件夹列表

如何使用Webpack构建React应用并导入资产文件夹?

React-native:Android Debug构建不会从react-native资产文件夹加载图像资产

是否可以运行没有节点模块文件夹的React Native项目

react-native run-android挂起扫描文件夹

React Native Development中的“ / ios / index / DataStore”文件夹是什么

如何在React Native项目中重新生成ios文件夹?

React Native iOS和Android文件夹不存在

将React Native项目移动到新文件夹

React Native项目中应该忽略哪些文件夹git?

React Native iOS从应用程序的Documents文件夹读取图像

React-native WebView:从assets文件夹加载html和js

从Xamarin迁移到React Native:Xamarin SQLite文件夹路径

如何在React Native Fs中重命名/移动文件夹?

如何在React Native中访问其他文件夹中的资产?

如何在realm-react-native中创建嵌套的类似于文件夹的结构?

react-native-* .js导入* .ts文件

无法在React Native中导入.js文件

React Native:有什么方法可以检查文件是否存在于android_asset文件夹中?

如何使用react-native和expo获取位于assets文件夹中的文件的绝对路径?

React Native 无法将模块“png”解析为文件夹:它不包含包,也不包含索引文件

如何将整个SVG图像文件夹导入(或如何动态加载)到React Web App中?

TOP 榜单

热门标签

归档