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相关。因为用了babel7transform-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

    原文作者:HaHa
    原文地址: https://segmentfault.com/a/1190000018712753
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞