乐趣区

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?

手动编辑 URL:https://github.com/react-nati…[当前版本号]…version/[目标版本号]。比如我是从 0.55.4 到 0.59.2 那么就是 https://github.com/react-nati…
然后查看变更(点击 Files changed)来手动更改。

如果你习惯在本地查看变更,比如在 vs code 中,那么可以在 releases 中下载对应的版本,在本地创建一个 git 仓库,再用目标版本的文件替换之。
后来发现了一个网站。。(捂脸 和方法 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

退出移动版