无法将 React Native Web 与 react Navigation 集成答案

【问题标题】：Cannot integrate React Native Web with react Navigation无法将 React Native Web 与 react Navigation 集成
【发布时间】：2019-01-08 09:48:15
【问题描述】：

我在 React 原生 WEB 项目中集成 React 导航时遇到了很多困难。

我在云沙箱中创建了一个带有 React Native Web 和 React Navigation 的迷你项目，一切正常。

请看一下，我没有使用最新的 react 导航，但我之前尝试过最新的（在 API 更改时更新代码），它工作正常。

React Native web Running in Sandbox

我已经完全按照原样克隆了这个项目，安装了所有依赖项并尝试了不同版本的 React Native Web、Webpack（版本 3 和 4）、babel（版本 6 和 7）和最新的 React Navigation（版本 3+ )。我无法让它在本地主机上运行，错误是：

Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
| 
| class TabView extends React.PureComponent {
|   static defaultProps = {
|     lazy: true,
|     removedClippedSubviews: true,

关于 React Navigation 版本 1.5.8 和最新版本的类似错误。但它在沙盒中运行良好。

是否有人熟悉这种类型的设置以及为什么完全相同的代码在 localhost 上不起作用？

我也尝试在根目录中创建一个 webpack.config.js 并按照一些建议更改配置，但没有运气。

您可以克隆这个与沙盒完全相同的 repo 并亲自查看。

Clone this Github Repo

任何帮助将不胜感激

【问题讨论】：

标签： react-native webpack react-navigation babeljs react-native-web

【解决方案1】：

这也发生在我身上。原因是 React Navigation 提供的一些模块没有被转译成它们对应的 react-native-web 等价物。我的意思是您需要使用babel-loader 或您正在使用的任何东西单独转译这些模块。 webpack.config or .babelrc 中的以下内容应该可以工作：

{
  test: /\.(js|jsx)$/,
  include: [
    path.resolve(root, "node_modules/@react-navigation"),
    path.resolve(root, "node_modules/react-navigation"),
    path.resolve(root, 'node_modules/react-native-uncompiled'),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-gesture-handler"),
    path.resolve(root, "node_modules/react-native-vector-icons"),
    path.resolve(root, "node_modules/react-native-web"),
    path.resolve(root, "node_modules/react-native-tab-view"),
    path.resolve(root, "node_modules/react-native-drawer"),
    ....and whatever module gives problem....
  ] // external non react-native packages to be compiled by Babel
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: ['react-native-web']
        ...
    }
  }
};

这里有一篇对这个话题有明确解释的文章：https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0

【讨论】：