无法将React Native Web与react导航集成

Question

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

我已经在云沙箱中创建了一个带有react原生web和react导航的迷你项目，一切都按预期进行。

请看一下，我没有使用最新的react导航，但我以前尝试过最新的(随着API的改变而更新代码)，它工作得很好。

React Native web Running in Sandbox

我已经按原样克隆了这个项目，安装了所有依赖项，并尝试了不同版本的React Native Web，即Webpack(版本3和4)、巴别塔(版本6和7)和最新的React导航(版本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导航版本1.5.8上，在最新版本上出现类似的错误。但它在沙盒中工作得很好。

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

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

您可以克隆此存储库，它是完全相同的沙箱，并亲自查看。

Clone this Github Repo

如果有任何帮助，我们将不胜感激。

Answer 1

这也发生在我身上。原因是React导航提供的一些模块没有转换为对应的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