3

你好呀，

我正在关注这篇文章来设置一个 react-native + web 代码共享。这是上面文章中描述的带有准系统 monorepo 设置的 repo 链接。

如上文所述，我成功地设置了准系统 monorepo 应用程序，然后我将现有的 react-native 应用程序代码移植到此架构（在组件文件夹中）并让移动应用程序正常工作。

当我尝试运行 web 应用程序（使用 react-native-web 将 react-native 转换为 web）时，我遇到了一些错误。这并不是说我没有预料到会出现一些错误，我知道react-native-web对于 0.55 以上的 react-native 版本和所有这些问题来说，它还不是那么稳定和最新。

但是我在这里遇到的错误与我认为的 webpack 配置更相关。我的文件与原始config-override.js文件基本相同，除了这部分（我更改了以希望解决我将在下面提到的错误）：

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文件）有问题。我当然知道在解决这些问题后我会遇到更多错误。这种设置可能最终对我们根本不起作用。但这值得一试，我必须能够在您的帮助下解决这些错误。

谢谢。

4

2 回答 2

3

您可能无法在 Web 上使用这些包，因为它们是原生包（Android 和 iOS）而不是 Web 包。

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

为 CookieManager 创建包装器的示例：cookieManagerWrapper.js（其他所有内容：Android 和 iOS）和 cookieManagerWrapper.web.js（仅限 Web）。

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

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

一些 React Native 包也可以在 Web 上运行，因为它们只包含与平台无关的 JavaScript 代码。还有一些包有 web 实现，可以在 webpack 中使用别名，比如 react-native-gradients 和 react-native-web-gradients，遗憾的是问题中提到的包不是这种情况。

使用 file.js、file.web.js、file.android.js 和 file.ios.js 进行文件拆分使得为每个平台编写不同的实现成为可能。这对于一些用户界面代码也很有用，您可以在 Web 上使用 3rd 方 React 组件，在移动设备上使用 3rd 方 React Native 组件，它们看起来很相似，可以实现更复杂的用户交互，因为 React Native Web 支持所有常规的 React 代码和 jsx 标签网络。

于 2019-07-25T20:31:44.333 回答
2

我能够通过添加： config.module.strictExportPresence = false在config-override.js

现在我被困在进一步的问题上。

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

于 2019-07-25T13:03:21.133 回答