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

时间:2019-01-08 09:48:15

标签: react-native webpack react-navigation babel react-native-web

在将React导航集成到React本机WEB项目中时,我遇到了很多困难。

我已经创建了一个迷你项目,其中包含React Native Web和React导航在云沙箱中,一切正常。

请看一下,我没有使用最新的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并按照建议的方式更改配置,但没有运气。

您可以克隆与该沙箱完全相同的此存储库,然后亲自查看。

Clone this Github Repo

请提供任何帮助

1 个答案:

答案 0 :(得分:0)

这也发生在我身上。原因是因为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