一、升级步骤
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
解决方案:
去掉react-native-iber-svg,安装最新的react-native-svg
去掉react-native-iber-qrcode-svg,安装最新的react-native-qrcode-svg
2、stripe
报错原因:
解决方案:
3、Slider
报错原因:A trailing comma is not permitted after the rest property
解决方案:
4、Malformed calls from JS:field sizes are different
报错原因:Malformed calls from JS:field sizes are different
解决方案:
5、react-navigation
解决方案:
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
6、react-navigation
解决方案:
导出的createStackNavigator要用createAppContainer包裹才能用
https://reactnavigation.org/docs/en/app-containers.html
7、react-navigation
在iPhone中手势返回的时候报错
问题分析:
该问题是由于screen没有得到手势返回的事件,是由于createAppContainer懒加载导致的,如果你的代码是让createAppContainer等待一些耗时事件完成之后再显示加载的,就会出现改问题
解决方案:
给每一个screen手动添加手势
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
gestureHandlerRootHOC(screen);
8、react-navigation
解决方案:
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
三、 其他问题
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)