1

我正在关注本教程

我的项目是使用CRWNA初始化的

教程作者和他的 git nb 我已经联系了他...

这是我的教程仓库，显示了有罪的代码……</p>

因此，yarn android 按预期工作，但yarn web 无法编译：

Failed to compile
./node_modules/react-native-ratings/src/SwipeRating.js
SyntaxError: /home/pmy/gitphone/node_modules/react-native-ratings/src/SwipeRating.js: Support for the experimental syntax 'classProperties' isn't currently enabled (41:23):

  39 | 
  40 | export default class SwipeRating extends Component {
> 41 |   static defaultProps = {
     |                       ^
  42 |     type: 'star',
  43 |     ratingImage: require('./images/star.png'),
  44 |     ratingColor: '#f1c40f',

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
This error occurred during the build time and cannot be dismissed.

注意所有其他问题，这里不要专门指 CRWNA 并且没有一个提案对我有用，我已经尝试了很多......

最相关的信息问题 https://github.com/react-native-training/react-native-elements/issues/1779和 https://github.com/babel/babel/issues/8655和支持实验语法' classProperties' 当前未启用

包.json

{
  "name": "gitphone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "./node_modules/.bin/react-native start",
    "start-clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm start -- --reset-cache",
    "android": "./node_modules/.bin/react-native run-android",
    "ios": "./node_modules/.bin/react-native run-ios",
    "web": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "npm run test:web && npm run test:native",
    "test:web-watch": "node scripts/test.js --watch --config \"./config/web.jest.config.js\"",
    "test:web": "node scripts/test.js --config \"./config/web.jest.config.js\"",
    "test:native": "node scripts/test.js --config \"./config/native.jest.config.js\"",
    "test:native-watch": "node scripts/test.js --watch --config \"./config/native.jest.config.js\"",
    "coverage": "node scripts/test.js --coverage --config \"./config/web.jest.config.js\"",
    "coverage:native": "node scripts/test.js --config \"./config/native.jest.config.js\" --coverage"
  },
  "dependencies": {
    "react": "^16.6.x",
    "react-app-polyfill": "^0.1.3",
    "react-art": "^16.6.x",
    "react-dom": "^16.6.x",
    "react-native": "0.55.x",
    "react-native-elements": "^1.1.0",
    "react-native-vector-icons": "^6.5.0",
    "react-native-web": "^0.10.x"
  },
  "devDependencies": {
    "@babel/core": "7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@svgr/webpack": "2.4.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-named-asset-import": "^0.2.3",
    "babel-preset-react-app": "^6.1.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "metro-react-native-babel-preset": "^0.51.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react-dev-utils": "^6.1.1",
    "react-hot-loader": "^4.6.3",
    "react-test-renderer": "^16.6.3",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      ["module:metro-react-native-babel-preset"],
      ['react-app']
    ],
    ignore: [ "node_modules/art/core/color.js" ],
    plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-regenerator',
    [
      '@babel/plugin-transform-runtime',
      {
        helpers: false,
        regenerator: true,
      },
    ],
      ["module-resolver", {
        "alias": {
          "^react-native$": "react-native-web"
        }
      }]
    ],
  };
};

我的问题是如何配置它以使纱线网络按预期工作？

4

0 回答 0