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跑项目遇到的问题

• FBSDKCoreKit/FBSDKCoreKit.h file not found
• 其他常见问题

二、升级之后的问题

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）