～大家好，分享一个今天遇到的问题。

写在前面，babel 7 遇到装饰器报错的情况应对，babel7以前的不适用。

下面的每一步操作后都需要清理缓存

react-native start --reset-cache

1.你可能遇到下面的错误界面。

执行以下命令

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

img.1

2、到你的rn工程目录找到文件.babelrc，没有自己创建，将下面的代码放进去。

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

我的文件是下面这样的

{

  "presets": ["react-native"],

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

}

3、如果没有问题，恭喜成功完成配置，如果遇到以下红色画面，继续往下看

img2

这个问题的出现主要因为@babel各个插件的版本不一致造成的，在工程根目录执行命令

grep -r 'version' node_modules/@babel/*/package.json|grep -v "beta.47"

获取所有的@babel插件版本，或者如果有yanr.lock文件也可以查看babel/core的版本是否与你package.json里的@babel/plugin-proposal-decorators版本不一致。如果不一致修改package.json的版本，与lock文件的babel保持一致即可。

出问题的配置

package.json yarn.lock

修改后

package.json

最终问题解决。

分享一下，做个笔记。