Javascript 将react-native元素添加到react-native时出错

我使用react-native web项目使用react-native，我想使用react-native元素，但在向项目添加react-native元素时出错

./node_modules/react-native-elements/src/avatar/Avatar.js
SyntaxError: /home/hamidreza/Desktop/reactElement/node_modules/react-native-elements/src/avatar/Avatar.js: Unexpected token (72:4)

  70 | 
  71 |   const Utils = showAccessory && (
> 72 |     <TouchableHighlight
     |     ^
  73 |       style={StyleSheet.flatten([
  74 |         styles.accessory,
  75 |         {

My

package.json

：

{
  "name": "ReactNativeWebApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "web": "react-scripts start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.4.2",
    "react": "16.11.0",
    "react-dom": "^16.13.1",
    "react-native": "0.62.2",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.12.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-scripts": "^3.4.1",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如何解决这个问题？

由于“本机”包不包含编译代码（babel和jsx转换后的es5），要在web中使用它们，必须将库添加到webpack配置中

因此，我必须将

path.resolve（path.appNodeModules，'react native elements'），

和

path.resolve（path.appNodeModules，'react native rating'），

添加到网页包中，这就解决了问题

参考文献

{
  "name": "ReactNativeWebApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "web": "react-scripts start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.4.2",
    "react": "16.11.0",
    "react-dom": "^16.13.1",
    "react-native": "0.62.2",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.12.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-scripts": "^3.4.1",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}