React Native 升級指南 從0.55升級到0.59

前言

本月早些時候facebook發佈了React Native 0.59，我的感受算是RN的里程碑，主要有：

• 增長了對hooks的支持
• 更新了Android端JSC(JavaScript Core)
• inline requires
• 精簡代碼：一些組件交給社區來維護
• CLI的提高，同時也從rn庫中獨立了出來

詳細內容

升級到0.59

核心就是參考RN diff PURGE來手動升級，這也是官方推薦的方式。此外，rn0.59中移除了react-native-git-upgrade，取而代之的是react-native upgrade，而react-native upgrade就是基於RN diff PURGE。

如何查看指定版本之間的diff？

1. 手動編輯URL：https://github.com/react-nati...[當前版本號]...version/[目標版本號]。

   好比我是從0.55.4到0.59.2 那麼就是https://github.com/react-nati...

   而後查看變動（點擊Files changed）來手動更改。

2. 若是你習慣在本地查看變動，好比在vs code中，那麼能夠在releases中下載對應的版本，在本地建立一個git倉庫，再用目標版本的文件替換之。
3. 後來發現了一個網站。。（捂臉 和方法1實際上是同樣的

遇到的一些坑

• iOS的project.pbxproj變動很是多(0.55.4 -> 0.59.2)，其實根本不用管他。（有待驗證，我改吐了，後來無論他項目也跑起來了）

• cocoaPods： pod install時報錯could not find compatible versions for pod "Folly"，解決方法：Podfile中添加

  # Third party deps podspec link
    pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  官方說明

• iOS打包完畢後啓動app，報錯：can't find variable requireNativeComponent。 Google無果。一番排查後發現是rn源碼(Modal.js)"出錯了"，本覺得能夠pr走一波，後來才發現GitHub上的源碼沒問題。OK，npm接鍋。刪除node_modules下的rn文件夾，npm i react-native， 解決。
• 報錯2: decorator相關。由於用了babel7，transform-decorators-legacy並不適用，使用@babel/plugin-proposal-decorators，同時帶上@babel/plugin-proposal-class-properties。

• 繼續報錯: TypeError: undefined is not an object (evaluating 'props.getItem')： 這個是@babel/plugin-proposal-class-properties的鍋相關issue。若是你不須要這個，直接移除便可。又或者，添加新的babel plugin@babel/plugin-transform-flow-strip-types而且保證順序在@babel/plugin-proposal-class-properties之上。附：本人項目中.babelrcplugins部分

  "plugins": [
      ["@babel/plugin-transform-flow-strip-types"],
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]

Enjoy new version React Native

至此，你的rn項目應該能夠跑起來了。一進去你（可能）會發現很是多的Yellow Box Warning按照提示慢慢去改進吧～

也但願這篇文章對那些和我同樣沒有原生經驗的小夥伴有所幫助。

Thanks for reading