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