如何在升级后的react-native中使用装饰器

情况

1.使用最新版的rn（0.56+）
2.旧版本rn升级到新版本(0.56+)

问题

导致无法使用es7装饰器,报如下错误

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

原因

新版本rn使用babel@7.0+,所以不能再使用原先的babel-plugin-transform-decorators-legacy(babel@6以下使用)

额外条件

很多人在运行

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

后发现任然报上面的错误。这里安装版本有额外的条件，就是装饰器的版本要跟着babel的版本一样，并且用脚手架react-native-cli构建的时候使用时yarn install，所以安装的时候必须使用以下命令

yarn add @babel/plugin-proposal-decorators --dev

配置.babelrc

{
  "presets": ["react-native"],
  "plugins":[["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

这里的配置跟原先的不一样

如何查看rn使用babel解析版本

在项目的目录下打开yarn.lock文件，即可查看版本号

结尾

走完以上步骤就能在rn中愉快地使用装饰器语法了