更新RN版本后Android端打包APP问题解决

落日映苍穹つ 2023-06-21 02:23 28阅读 0赞

# 1 Android端问题概述 #

更新RN版本到0.61.0后，打包命令报错，报错原因往往来源于第三方库，因为第三方库的版本还是比较老旧的版本，它们没有适配新android版本或新的构建工具。当我们使用新的构建版本去构建APP时，就会发生很多错误。

# 2 构建APP的问题种类 #

## 2.1 gradle配置不正确 ##

可用init命名初始化一个新RN版本的项目，参考里边的gradle配置，然后更改自己项目的gradle配置。

## 2.2 RN迭代API或摒弃组件 ##

1、react-native新版本不再支持ListView组件，若项目存在ListView组件的引用会报错。

2、WebView组件（导致APP报错不能正常运行）

错误信息：Invariant Violation: WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'。

错误原因：新版本react-native剔除了WebView组件，把它放到了react-native-webview库当中。引用WebView组件须从react-native-webview库获取。

3、RN新版本移除了AsyncStorage的API，将其放到了@react-native-community/async-storage库当中。

错误信息：AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'. See [https://github.com/react-native-community/react-native-async-storage][https_github.com_react-native-community_react-native-async-storage]

错误原因：RN新版本移除了AsyncStorage的API，将其放到了@react-native-community/async-storage库当中。

解决办法：

（1）yarn add @react-native-community/async-storage

（2）import AsyncStorage from '@react-native-community/async-storage';

## 2.3 依赖冲突 ##

1、android库版本的冲突；

2、第三方库所依赖jar包的冲突。

## 2.4 第三方库版本老旧，不能兼容新RN库或新的gradle构建版本 ##

可到对应第三方库的github上面查看releases版本及其更新描述，寻找一个兼容性好的版本，然后在项目更新该库的版本。

## 3 APP打包命令错误 ##

打包配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

## 3.1 解决android包依赖冲突 ##

将v7、v4包全部替换成androidx的包。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1][]

执行操作后app目录下的build.gradle文件的依赖项会有下面两个

compile('androidx.legacy:legacy-support-v4:1.0.0') \{ force = true \} compile('androidx.appcompat:appcompat:1.0.0')

## 3.2 打包命令报错：verifyReleaseResources FAILED ##

\* What went wrong: Execution failed for task ':react-native-aliyun-push:verifyReleaseResources'. > 1 exception was raised by workers...

1、错误原因

有两个文件内的资源找不到。

[https://blog.csdn.net/zhichaosong/article/details/88060948][https_blog.csdn.net_zhichaosong_article_details_88060948]

2、解决方案

统一子模块的构建版本为28。

For me this works:

add this code in /android/build.gradle

subprojects {
        afterEvaluate {project ->
            if (project.hasProperty("android")) {
                android {
                    compileSdkVersion 28     //do this in android/app/build.gradle too
                    buildToolsVersion '28.0.3'  //do this in android/app/build.gradle too
                }
            }
        }
    }

# 4 APP安装后运行闪退 #

## 4.1 react-native-aliyun-push库相关问题 ##

1、错误日志

java.lang.ClassNotFoundException: Didn't find class "com.ut.device.UTDevice"

2、错误原因

（1）阿里云推送SDK依赖utdid 的jar包，但项目依赖没有加入utdid 这个jar包，程序找不到UTDevice类，因而报错。

（2）utdid 未打进apk，或 apk 进行分包时 utdid 没有打入主分包中，或 可能是 utdid 冲突。

\- 查看react-native-aliyun-push库的build.gradle，它的依赖项是这样的：

dependencies {
    
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        implementation 'com.facebook.react:react-native:+'
        api ('com.aliyun.ams:alicloud-android-push:3.1.6')
        {
            exclude module:'alicloud-android-utdid'
        }
        implementation ('com.aliyun.ams:alicloud-android-utils:1.1.3') {
            exclude module:'alicloud-android-utdid'
        }
        implementation ('com.aliyun.ams:alicloud-android-beacon:1.0.2') {
            exclude module:'alicloud-android-utdid'
        }
        // implementation 'com.aliyun.ams:alicloud-android-utdid:1.1.5.3'
        implementation ('com.aliyun.ams:alicloud-android-ut:5.4.0') {
            exclude module:'alicloud-android-utdid'
        }
        api(name: 'alicloud-android-third-push-3.0.9', ext: 'aar') {
            exclude module:'alicloud-android-utdid'
        }
        implementation 'me.leolin:ShortcutBadger:1.1.22@aar'
    }

exclude命令排除了utdid的包。

3、解决办法

（1）引入utdid包。修改react-native-aliyun-push的build.gradle文件的依赖项

dependencies {
    
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        implementation 'com.facebook.react:react-native:+'
        api ('com.aliyun.ams:alicloud-android-push:3.1.6')
    //    {
    //        exclude module:'alicloud-android-utdid'
    //    }
        implementation ('com.aliyun.ams:alicloud-android-utils:1.1.3') {
            exclude module:'alicloud-android-utdid'
        }
        implementation ('com.aliyun.ams:alicloud-android-beacon:1.0.2') {
            exclude module:'alicloud-android-utdid'
        }
        // implementation 'com.aliyun.ams:alicloud-android-utdid:1.1.5.3'
        implementation ('com.aliyun.ams:alicloud-android-ut:5.4.0') {
            exclude module:'alicloud-android-utdid'
        }
        api(name: 'alicloud-android-third-push-3.0.9', ext: 'aar') {
            exclude module:'alicloud-android-utdid'
        }
        implementation 'me.leolin:ShortcutBadger:1.1.22@aar'
    }

（2）在项目的build.gradle引入utdid依赖包（这样重装node\_modules后就不需要修改react-native-aliyun-push的build.gradle文件）

// 解决itdid未依赖问题：java.lang.ClassNotFoundException: Didn't find class "com.ut.device.UTDevice"

compile 'com.aliyun.ams:alicloud-android-utdid:1.1.5.3'

## 4.2 TypeError: console.assert is not a function. ##

1、错误日志

Process: com.xxxx.xxx PID: 32010 com.facebook.react.common.JavascriptException: TypeError: console.assert is not a function. (In 'console.assert(null!=o,"'this' is expected an Event object, but got",n)', 'console.assert' is undefined), stack: o@123:173 w@123:1841 dispatchEvent@123:5597 value@118:5917 value@118:1818 value@45:1280 value@25:3685 <unknown>@25:841 value@25:2939 value@25:813 value@-1 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:71) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:751) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) at android.os.Looper.loop(Looper.java:154) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) at java.lang.Thread.run(Thread.java:761)

2、问题原因：函数未定义。

3、解决办法

[https://github.com/facebook/react-native/issues/26007][https_github.com_facebook_react-native_issues_26007]

add this code in the index.js flle, This temporarily solved my problem.

import { AppRegistry } from 'react-native';
    
    import App from './src/App';
    
    if (!__DEV__) {
        global.console = {
            info: () => {},
            log: () => {},
            assert: () => {},
            warn: () => {},
            debug: () => {},
            error: () => {},
            time: () => {},
            timeEnd: () => {},
        };
    }
    console.ignoredYellowBox = ['Remote debugger'];
    AppRegistry.registerComponent('XXXX', () => App);

[https_github.com_react-native-community_react-native-async-storage]: https://github.com/react-native-community/react-native-async-storage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210211405920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191210211358950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_zhichaosong_article_details_88060948]: https://blog.csdn.net/zhichaosong/article/details/88060948
[https_github.com_facebook_react-native_issues_26007]: https://github.com/facebook/react-native/issues/26007