React Native 升级指南 从0.55升级到0.59

前言

本月早些时候facebook发布了React Native 0.59,我的感受算是RN的里程碑,主要有:html

  • 增长了对hooks的支持
  • 更新了Android端JSC(JavaScript Core)
  • inline requires
  • 精简代码:一些组件交给社区来维护
  • CLI的提高,同时也从rn库中独立了出来

详细内容node

升级到0.59

核心就是参考RN diff PURGE来手动升级,这也是官方推荐的方式。此外,rn0.59中移除了react-native-git-upgrade,取而代之的是react-native upgrade,而react-native upgrade就是基于RN diff PURGE。react

如何查看指定版本之间的diff?

  1. 手动编辑URL:https://github.com/react-nati...[当前版本号]...version/[目标版本号]。

    好比我是从0.55.4到0.59.2 那么就是https://github.com/react-nati...git

    而后查看变动(点击Files changed)来手动更改。github

  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中添加web

    # 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'

    官方说明npm

  • 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部分json

    "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按照提示慢慢去改进吧~react-native

也但愿这篇文章对那些和我同样没有原生经验的小伙伴有所帮助。babel

Thanks for reading

相关文章
相关标签/搜索