如何在升級後的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中愉快地使用裝飾器語法了