Как использовать значки react-native-vector в веб-версии react native?

#android #reactjs #react-native #react-native-web #react-native-vector-icons

#Android #reactjs #react-native #react-native-web #react-native-векторные иконки

Вопрос:

Я пытаюсь создать гибридное приложение с использованием react native, которое работает одновременно на Android и в Интернете.Поэтому я попытался использовать пакет react-native-vector-icons, но когда я пытаюсь запустить, версия Android компилируется без каких-либо ошибок, хотя веб-версии выдают следующую ошибку:

 ./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: D:ParentlaneReactNativeWebnode_modulesreact-native-vector-iconslibcreate-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:10):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     root = null;
     |          ^
  44 | 
  45 |     static propTypes = {
  46 |       allowFontScaling: PropTypes.bool,

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
  

ниже приведен мой package.json:

 {
  "name": "ReactNativeWeb",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "react-scripts start",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "0.63.2",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "^0.13.12"
  },
 
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@babel/runtime": "^7.11.2",
    "@react-native-community/eslint-config": "^2.0.0",
    "metro-react-native-babel-preset": "^0.63.0",
    "react-scripts": "^3.4.3",
    "react-test-renderer": "16.13.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.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.config.js:

 module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};
  

может кто-нибудь, пожалуйста, скажите мне, как исправить эту ошибку?