无法将React Native Web与反应导航集成

Question

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

我创建了一个迷你项目，使用本机Web作为反应并在云沙箱中进行反应导航，一切都按预期工作。

请看看，我没有使用最新的反应导航，但我已经尝试过最新的（更新代码作为API更改），它工作正常。

React Native web Running in Sandbox

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

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和最新版本上的类似错误。但它在Sandbox中运行良好。

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

我也试过在root中创建一个webpack.config.js并改变配置，但是没有运气。

你可以克隆这个与沙箱完全相同的仓库并自己查看。

Clone this Github Repo

如有任何帮助，将不胜感激

Answer 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