React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

时间:2024-05-23 12:28:11

前两篇文章已经记录部分错误日志信息,从0.57.5升级到0.62.2;

由于项目原因,需要进行项目重构,现在的0.57.5版本已经不能满足于项目需求;

期间升级也遇到了许多的坑,只能说对于AndroidStudio以及RN的兼容性还不是太友好

由于0.62.2升级后已经支持androidx特性,对于项目中的v4、v7特性已经不在支持,这简直是干(丧)的(心0漂(病)亮(狂);

因为项目比较大,可以说是很大很大¥¥¥……%#¥#%¥,只能手动修改每一处报错信息:

好了,正文开始:

1、Android原生准备工作:

第一步:配置gradle版本相关信息:

distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip

classpath 'com.android.tools.build:gradle:3.5.2

第二步:项目v4、v7包资源替换

修改项目中所有涉及到的v4、v7包引用及其他系统控件,这里比较多,会比较繁琐,根据错误日志慢慢修改;
例如如下报错信息:多么经典啊---重新引入Androidx
React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

第三步:更新package.json三方插件:

更新package.json中RN版本信息0.62.2;并逐步更新对应的其他RN三方插件以兼容Androidx

 

RN服务错误记录:

 

1、@babel/runtime错误日志

React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

2、RNCViewPager错误信息:

React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

解决方案:由于react-native-scrollable-tab-view三方插件不支持最新版组件特性,需要替换该插件资源,新增如下插件:"@react-native-community/viewpager": "^4.1.0",并进行link;Android原生配置:
setting.gradle设置添加:

include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')

Android/app/build.gradle中添加:

compile project(path: ':@react-native-community_viewpager')

MainApplication中新增:new RNCViewPagerPackage()

3、提示报错信息:@react-native-community/geolocation
React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

解决方案:

"@react-native-community/geolocation": "^2.0.2",

并进行link;如link失败,手动配置settings.gradle以及主moudle下build.gradle;并在application中引入

new GeolocationPackage()

4、0.62.2版本不在支持RCTDeviceEventEmitter:将RCTDeviceEventEmitter替换为DeviceEventEmitter,并删除原有RCTDeviceEventEmitter;报错信息如下:

React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

5、新版RN0.62.2核心组件webview不在支持,提示报如下信息:

React-Native:版本升级从0.57.5升级到0.62.2遇到的Android错误以及RN插件错误

解决方案:npm install --save react-native-webview

将文中所有的WebView引用全部替换:import { WebView } from 'react-native-webview';

由于时间原因,暂时更新到这里,后续再一一进行添加整理;欢迎讨论