ReactNative从0.53.0升级到0.59.0采坑记录

一、升级步骤

1、升级工具包
npm install -g react-native-cli yarn
2、生成一个与原来工程一样名字的工程
react-native init ProjectName

如果你是搭建的sinopia私有npm服务的话,需要对@符号的库进行重定向到npm的公服,不然无法解析,会报错
npm config set "@react-navigation:registry" http://registry.npmjs.org/
npm config set "@react-native-community:registry" http://registry.npmjs.org/
npm config set "@jest:registry" http://registry.npmjs.org/
npm config set "@cnakazawa:registry" http://registry.npmjs.org/
npm config set "@types:registry" http://registry.npmjs.org/
3、将iOS和Android原生工程先进行手动迁移到新工程中
  • 工程能跑起来再进行下一步
4、将JS代码进行迁移到新工程
  • 直接copy过来即可
  • 先不着急升级react-navigation,先把第三方库的问题找出来,有问题的就先进行升级或者替换
5、升级react-navigation
  • 卸载原来的react-navigation yarn remove react-navigation
  • 安装最新的react-navigation yarn add react-navigation
6、用Xcode10.1跑项目遇到的问题

二、升级之后的问题

1、react-native-svg
1248713-c1213fd3194e2042.png
屏幕快照 2019-03-16 上午10.46.32.png
1248713-afc3315da06f774b.png
屏幕快照 2019-03-16 上午10.25.55.png
1248713-57f5cc1a1807fc62.png
屏幕快照 2019-03-16 上午10.44.16.png

解决方案:
去掉react-native-iber-svg,安装最新的react-native-svg
去掉react-native-iber-qrcode-svg,安装最新的react-native-qrcode-svg

2、stripe
1248713-5e20632315f939cb.png
屏幕快照 2019-03-16 上午10.48.19.png
1248713-d4816730aa12fcc7.png
屏幕快照 2019-03-16 上午10.48.28.png

报错原因:
解决方案:

3、Slider
1248713-a17dcda6ac0b477e.png
屏幕快照 2019-03-16 上午10.33.05.png

报错原因:A trailing comma is not permitted after the rest property
解决方案:

4、Malformed calls from JS:field sizes are different
1248713-bf5b4d998df630cd.png
屏幕快照 2019-03-16 上午11.28.55.png

报错原因:Malformed calls from JS:field sizes are different
解决方案:

5、react-navigation
1248713-a0c4c7b1828a33cc.png
屏幕快照 2019-03-16 下午12.27.05.png

解决方案:

yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
6、react-navigation
1248713-dfde2250a448e84f.png
屏幕快照 2019-03-16 下午12.39.09.png

解决方案:
导出的createStackNavigator要用createAppContainer包裹才能用
https://reactnavigation.org/docs/en/app-containers.html

7、react-navigation
1248713-28e4500b6b4273ad.png
屏幕快照 2019-03-16 下午12.50.42.png

在iPhone中手势返回的时候报错
问题分析:
该问题是由于screen没有得到手势返回的事件,是由于createAppContainer懒加载导致的,如果你的代码是让createAppContainer等待一些耗时事件完成之后再显示加载的,就会出现改问题

解决方案:

给每一个screen手动添加手势

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
gestureHandlerRootHOC(screen);
8、react-navigation
1248713-cbf746d9008002e2.png
904629-402a53410b67e013.png

解决方案:

NavigationActions.reset  替换成  StackActions.reset
9、Xcode10运行项目报错node_modules/react-native/third-party/glog-0.3.5

解决方案:

cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../
cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh
10、node_modules/@sentry/cli: Command failed.

解决方案:
升级node版本
参考链接

11、Xcode打Release包报错:1.ld: could not reparse object file in bitcode bundle: 'Invalid bitcode version (Producer: '902.0.39.2_0' Reader: '900.0.39.2_0')', using libLTO version 'LLVM version 9.0.0, (clang-900.0.39.2)' for architecture arm64

解决方案:
关闭bitcode


1248713-85958a34406432d9.png
1440335-339f3bb09550a53a.png

三、 其他问题

1、SliderViewPagerAndroidWebViewAsync Storage在未来将从react-native中移除,需要从@react-native-community引入

可参考:
https://github.com/react-native-community/react-native-slider
https://github.com/react-native-community/react-native-viewpager
https://github.com/react-native-community/react-native-webview
https://github.com/react-native-community/react-native-async-storage

2、升级之后,View的默认背景色为白色,之前是灰色
3、语法更严谨
  • const 修饰的变量不能修改
  • 组件的样式大小不能为空(比如:width: null)
原文链接:加载失败,请重新获取