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

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

错误原因：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打包命令错误

打包配置

 

 

3.1 解决android包依赖冲突

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

 

执行操作后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

 

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

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);