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
屏幕快照 2019-03-16 上午10.46.32.png
屏幕快照 2019-03-16 上午10.25.55.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
屏幕快照 2019-03-16 上午10.48.19.png
屏幕快照 2019-03-16 上午10.48.28.png
报错原因：
解决方案：
3、Slider
屏幕快照 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
屏幕快照 2019-03-16 上午11.28.55.png
报错原因：Malformed calls from JS:field sizes are different
解决方案：
5、react-navigation
屏幕快照 2019-03-16 下午12.27.05.png
解决方案：
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
6、react-navigation
屏幕快照 2019-03-16 下午12.39.09.png
解决方案：
导出的createStackNavigator要用createAppContainer包裹才能用
https://reactnavigation.org/docs/en/app-containers.html
7、react-navigation
屏幕快照 2019-03-16 下午12.50.42.png
在iPhone中手势返回的时候报错
问题分析：
该问题是由于screen没有得到手势返回的事件，是由于createAppContainer懒加载导致的，如果你的代码是让createAppContainer等待一些耗时事件完成之后再显示加载的，就会出现改问题
解决方案：
给每一个screen手动添加手势
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
gestureHandlerRootHOC(screen);
8、react-navigation
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
1440335-339f3bb09550a53a.png
三、 其他问题
1、Slider、ViewPagerAndroid、WebView、Async 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）
