背景
1.三方库过时,采用的是0.48.1,在2017.9.21日发布的更新了,已经落后于接近一年半了,整体的三方库偏老,很多都没有维护了,比如antd-mobile(蚂蚁金服)、teaset(三方ui库)、react-native-device-info、react -native-root-toast、react-native-tab-navigator、react-navite-storage已经很久没有维护了。
2.低版本不直接支持typescript.js
3.对高版本兼容弱,我们的工程在xcode10上编译不过。在安卓高版本上也有些问题。
版本选型
1.react native 0.57.8
2.react 16.6.3
3.babel 7
升级分析
1.尝试采用react-native-git-upgrade工具
1.1升级工程下package.json中的react native版本和react 版本。
1.2安装react-native-git-upgrade工具模块
1.3
npm i
1.4react-native-git-upgrade(直接把react native升级到最新版本,或者react-native-git-upgrade X.Y.Z 这样把react native升级到指定的X.Y.Z版本)
1.5.出现了以下问题
Your project contains lock files generated by tools other than Yarn. It
is advised not to mix package managers in order to avoid resolution
inconsistencies caused by unsynchronized lock files. To clear this
warning, remove package-lock.json.
解决:删除对应的lock文件
1.6遇到Error:
Couldn't find preset "module:metro-react-
native-babel-preset":
解决:package.json中添加"metro-react-native-babel-preset": "0.48.0"
1.7根据报错逐步升级三方库,发现坑太大了,主要的原因是很多三方库还采用的babel6、但是最新的是采用的babel7会报错render is not instance的错,仔细思考了下,该方法完全不可控。
2.手动更改
2.1.新建hell world工程,升级到0.57.8,解决安卓和ios编译的问题。
2.2.升级到babel7
2.3.切换hcd3.0,根据hello wolrd工程下的配置,修改react native的版本,强制引用。修改paction.json。
2.4.npm i
2.5.npm audit fix –force
2.6.编译打包,启动服务。
2.7.逐步注释打开引用,一步一步删除三方库。
升级步骤
1.新建hello world工程。React native init helloWord 修改package.json中的react和react native的版本号。
2.将babel6升级到Babel7
3.Android之前是通过compile编译三方库,改为implements了。
4.在xcode 10编译运行,mac系统升级(大于等于10.13.6),如果存在xocde,只有在应用程序删除了之后(建议先备份),才能在apple store获取到最新的xcode10。
5.Ios,运行时出现不支持x86体系,在配置文件中改为debug模式,
6.将自动管理签名取消勾选。
7.ios12欠缺libstdc++.6.0.9.tbd,将其放在xcode指定文件夹下
/Applications/Xcode.app/Contents/Developer/
Platforms/iPhoneOS.platform/Developer/SDKs
/iPhoneOS12.0.sdk/usr/lib/
/Applications/Xcode.app/Contents/Developer/
Platforms/iPhoneSimulator.platform/Developer
/SDKs/iPhoneSimulator.sdk/usr/lib/
8.babel7不自带支持装饰,也就是不能使用注解,需要引入plugin-proposal-decorators,并在babel文件中配置。
{
"presets": [
"module:metro-react-native-babel-preset",
"@babel/preset-flow"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
9.从app根目录逐步打开注释,升级mobx,直接用use strict会报错。升级完还是报错。
10.引入"jsc-android": "236355.x.x",用来兼容安卓。
11.逐步打开三方库,react-native-tab-navigator完全按照配置,但是跑着报错,修改源码就包render is not instance,查看其package,json发现采用的是老版本的babel,很久没维护了,于是换了一个底部tab库
12.大多数三方库都兼容,边打开边升级到最新的三方库版本。查看对应三方库的github,按照说明来安装。比如jpush,就需要依赖于jcore-react-native。
13.少数不兼容的,考虑替换,或者直接不用三方库,用react native基础自己封装一套,比如react native device info也是直接升级会报render is not instance
14.然后替换完所有的三方库,基本上就完成了升级。
坑
1.三方库因为babel升级而不能用的库有teaset(三方ui库)、react-native-device-info、react-native-root-toast、react-native-tab-navigator、react-native-storage
2 .babel升级
3 .babel7不直接支持装饰
4.Code push变更为app center
5.ios12缺少两个库
6.android编译三方库 compile变成implements
7.最新mobx需要下载jsc三方库兼容
网友评论