react-native使用修饰器

该文章只为记录react-native使用ES7.0的修饰器语法

1.错误码

error: bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

2.分析

新版本的React-native默认使用的babel为7.0+ ,如：

"devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/plugin-proposal-decorators": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "metro-react-native-babel-preset": "0.54.1",
    "moment": "^2.19.1",
    "react-test-renderer": "16.8.6"
  },

所以以前的babel-plugin-transform-decorators-legacy(babel@6以下使用)不可使用。

3.解决方案

3.1.安装plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

的版本和和版本号保持一致。

3.2.修改babel.config.js文件

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [["@babel/plugin-proposal-decorators", { "legacy": true }]]
};