Question

你好，

我正在遵循this article来设置本机+网络代码共享。 Here is the repo link具有上述文章中所述的裸骨monorepo设置。

我成功完成了上述文章中所述的裸机monorepo应用程序，然后我将现有的本机应用程序代码移植到了该体系结构（在components文件夹中），并使移动应用程序正常运行。

strong>

当我尝试运行Web应用程序（使用react-native-web将react-native转换为Web）时，出现一些错误。不是我没想到会出现一些错误，我知道react-native-web并没有那么稳定，而且对于0.55以上的react-native版本以及所有这些问题也不是最新的。

但是我在这里遇到的错误与我认为的Webpack配置有关。我的config-override.js文件与original one基本上相同，除了这部分（我更改了此文件是为了克服我将在下面提到的错误）：

const appIncludes = [ resolveApp('src'), resolveApp('../components/src'), resolveApp('../../node_modules/react-navigation-deprecated-tab-navigator'), resolveApp('../../node_modules/react-native-color-matrix-image-filters'), resolveApp('../../node_modules/react-native-htmlview'), resolveApp('../../node_modules/react-native-loading-spinner-overlay'), resolveApp('../../node_modules/@react-native-community/async-storage'), resolveApp('../../node_modules/react-native-cookies'), resolveApp('../../node_modules/react-native-router-flux'), resolveApp('../../node_modules/react-native-actionsheet'), resolveApp('../../node_modules/react-native-autocomplete-input'), resolveApp('../../node_modules/react-native-circular-progress'), resolveApp('../../node_modules/react-native-google-places-autocomplete'), resolveApp('../../node_modules/react-native-image-progress'), resolveApp('../../node_modules/react-native-image-zoom-viewer'), resolveApp('../../node_modules/react-native-image-pan-zoom'), resolveApp('../../node_modules/react-native-keyboard-aware-scroll-view'), resolveApp('../../node_modules/react-native-linear-gradient'), resolveApp('../../node_modules/react-native-permissions'), resolveApp('../../node_modules/react-native-phone-input'), resolveApp('../../node_modules/react-native-picker-select'), resolveApp('../../node_modules/react-native-progress'), resolveApp('../../node_modules/react-native-push-notification'), resolveApp('../../node_modules/react-native-snap-carousel'), resolveApp('../../node_modules/react-native-svg'), resolveApp('../../node_modules/react-native-tab-view'), resolveApp('../../node_modules/react-navigation-drawer'), resolveApp('../../node_modules/react-navigation-stack'), resolveApp('../../node_modules/react-native-screens'), resolveApp('../../node_modules/react-navigation-tabs'), resolveApp('../../node_modules/@react-navigation'), resolveApp('../../node_modules/react-native-router-flux'), resolveApp('../../node_modules/react-native-gesture-handler'), resolveApp('../../node_modules/react-navigation'), ]

我在yarn workspace web start上遇到的错误是

import { Grayscale } from 'react-native-color-matrix-image-filters';

它给出：


尝试导入错误：“灰度”未从中导出   'react-native-color-matrix-image-filters'。

如果我只是删除此导入及其使用，那么我会得到：


尝试导入错误：“ react-native-cookies”不包含   默认导出（导入为“ CookieManager”）。

开启：

import CookieManager from 'react-native-cookies';

在玩耍的同时，我也得到了：

...../node_modules/react-native-router-flux/src/navigationStore.js Attempted import error: 'TabBarBottom' is not exported from 'react-navigation-deprecated-tab-navigator' (imported as 'DEPRECATED_TabBarBottom').

我很确定我的webpack / babel配置（config-override.js文件）有问题。而且我当然知道解决这些错误后，我会得到更多错误。而且此设置可能最终对我们根本不起作用。但这值得一试，我必须能够在您的帮助下克服这些错误。

谢谢。

Answer 1

您可能无法在网络上使用这些程序包，因为它们是对本机程序包（Android和iOS）而非网络程序包的反应。

这意味着您必须拆分导入和使用这些软件包的文件。

为CookieManager创建包装的示例：cookieManagerWrapper.js（其他所有版本：Android和iOS）和cookieManagerWrapper.web.js（仅适用于网络）。

在特定于Web的js文件中，您无需导入CookieManager，而是导入替代的Web库，以实现与移动设备相同的功能，但使用适用于Web的不同代码。

然后，您可以在任何地方导入和使用cookieManagerWrapper.js，当可用时，react-native-web会自动将其替换为cookieManagerWrapper.web.js。

当某些响应本机软件包仅由独立于平台的JavaScript代码组成时，它们也会在Web上运行。还有一些软件包具有可在webpack中别名的web实现，例如带有react-native-web-gradients的react-native-gradients，可惜问题中提到的软件包不是这种情况。

通过使用file.js，file.web.js，file.android.js和file.ios.js拆分此文件，可以为每个平台编写不同的实现。这对于某些用户界面代码也非常有用，您可以在Web上使用3rd party react组件，并在移动设备上使用3rd party react本机组件，这些组件看起来类似于实现更复杂的用户交互，因为react native Web支持上的所有常规react代码和jsx标签网络。

Answer 2

我能够通过添加以下内容来克服此错误： config.module.strictExportPresence = false

中的config-override.js

现在，我在其他问题上陷入困境。

问题的原始问题由此消失了。如果有的话，我将发布任何其他相关的更新。

在react-native-web monorepo体系结构中尝试导入错误

2 个答案: