React native 将react native web添加到现有react native应用程序时出错

我创建了一个react-native应用程序，方法是执行react-native init ReactNativeWeb

然后，我按照说明将react native web添加到其中

我还在我的应用程序的根文件夹下添加了一个index.web.js文件。以下是该文件的外观：

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";

class ReactNativeWeb extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          To get started, edit index.web.js
        </Text>
        <Text style={styles.instructions}>Press Cmd+R to reload</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

AppRegistry.registerComponent("ReactNativeWeb", () => ReactNativeWeb);
AppRegistry.runApplication("ReactNativeWeb", {
  rootTag: document.getElementById("react-app")
});

下面是我在.bablerc文件中的内容：

但是，当我尝试使用下面的命令运行此命令时，我得到以下错误

./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.con

错误：

./index.web.js中出现错误 从./node_modules/babel loader/lib/index.js生成模块失败： TypeError:无法读取null的属性“bindings” 在Scope.moveBindingTo/Users/aliyar/reactiveweb/node_modules/@babel/traverse/lib/Scope/index.js:867:13 在BlockScoping.updateScopeInfo/Users/aliyar/reactiveweb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17 在BlockScoping.run/Users/aliyar/reactiveweb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12 在PluginPass.BlockStatementSwitchStatementProgram/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24 在newFn/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/visitors.js:193:21 在NodePath.\u call/Users/aliyar/reactiveweb/node\u modules/@babel/traverse/lib/path/context.js:53:20 在NodePath.call/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:40:17 在NodePath.visit/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:88:12 在TraversalContext.visitQueue/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16 在TraversalContext.visitingle/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:90:19 @多网页包开发服务器/客户端？webpack/hot/dev-server.js./index.web.js main[2]

---

知道我为什么会出错吗？

我可以通过将babel预置react native升级到5.0.2版来解决您的问题。其他一切都应与您的设置相同

以下是我的完整package.json：

---

我希望这会有所帮助。

我可以通过将babel预置react native升级到5.0.2版来解决您的问题。其他一切都应与您的设置相同

以下是我的完整package.json：

---

我希望这能有所帮助。

@Hiаааааааааааааааа107。但应用程序并没有在浏览器中启动，我甚至在浏览器中打开了url。你能帮我一下吗。@ataravati你也是这样吗？@srikanth不，据我记忆所及。我不再使用该应用程序了。@Hiааааааааааааааааа。但应用程序并没有在浏览器中启动，我甚至在浏览器中打开了url。你能帮我一下吗。@ataravati你也是这样吗？@srikanth不，据我记忆所及。我不再使用那个应用程序了。

{
  "presets": ["@babel/preset-env"]
}

./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.con

{
  "name": "ReactNativeWeb02",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "build": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "0.58.0",
    "react-native-web": "^0.10.0-alpha.3"
  },
  "devDependencies": {
    "babel-plugin-react-native-web": "^0.9.13",
    "babel-preset-react-native": "^5.0.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "jest": {
    "preset": "react-native"
  }
}