Ionic android 12 添加cordova-android@11时出现飞溅错误

Question

Since Google raised the minimum sdk to 31 on the Google play console I had to make some changes and updates to Android 12, but when I try to add a new Android platform android@11 I have had this error regarding the flash that has changed on科尔多瓦11

谁能帮助我？

非常感谢您提前

这是错误：

Cannot read properties of null (reading 'find')
TypeError: Cannot read properties of null (reading 'find')
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:387:49
    at Array.forEach (<anonymous>)
    at updateProjectSplashScreen (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:384:7)
    at updateProjectAccordingTo (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:269:5)
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:67:21
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
[ERROR] An error occurred while running subprocess cordova.

        cordova.cmd platform add android@11 --verbose exited with exit code 1.

并且引发错误的文件是： E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js

function updateProjectSplashScreen (platformConfig, locations) {

    // res/values/themes.xml

    const themes = xmlHelpers.parseElementtreeSync(locations.themes);

    const splashScreenTheme = themes.find('style[@name="Theme.App.SplashScreen"]');

    [

        'windowSplashScreenAnimatedIcon',

        'windowSplashScreenAnimationDuration',

        'windowSplashScreenBackground',

        'windowSplashScreenBrandingImage',

        'windowSplashScreenIconBackgroundColor',

        'postSplashScreenTheme'

    ].forEach(themeKey => {

        const cdvConfigPrefKey = 'Android' + themeKey.charAt(0).toUpperCase() + themeKey.slice(1);

        const cdvConfigPrefValue = platformConfig.getPreference(cdvConfigPrefKey, this.platform);

        let themeTargetNode = splashScreenTheme.find(`item[@name="${themeKey}"]`);

        switch (themeKey) {

        case 'windowSplashScreenBackground':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_background`

            themeTargetNode.text = '@color/cdv_splashscreen_background';

            break;

        case 'windowSplashScreenAnimatedIcon':

            // handle here the cases of "png" vs "xml" (drawable)

            // If "png":

            //  - Clear out default or previous set "drawable/ic_cdv_splashscreen.xml" if exisiting.

            //  - Copy png in correct mipmap dir with name "ic_cdv_splashscreen.png"

            // If "xml":

            //  - Clear out "{mipmap}/ic_cdv_splashscreen.png" if existing.

            //  - Copy xml into drawable dir with name "ic_cdv_splashscreen.xml"

            // updateProjectSplashScreenIcon()

            // value should change depending on case:

            // If "png": "@mipmap/ic_cdv_splashscreen"

            // If "xml": "@drawable/ic_cdv_splashscreen"

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            break;

        case 'windowSplashScreenBrandingImage':

            // display warning only when set.

            if (cdvConfigPrefValue) {

                events.emit('warn', `"${themeKey}" is currently not supported by the splash screen compatibility library. https://issuetracker.google.com/issues/194301890`);

            }

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current node, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@drawable/ic_cdv_splashscreen_branding';

            }

            break;

        case 'windowSplashScreenIconBackgroundColor':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenIconBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                // currentItem.remove();

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current color, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@color/cdv_splashscreen_icon_background';

            }

            break;

        case 'windowSplashScreenAnimationDuration':

            themeTargetNode.text = cdvConfigPrefValue || '200';

            break;

        case 'postSplashScreenTheme':

            themeTargetNode.text = cdvConfigPrefValue || '@style/Theme.AppCompat.NoActionBar';

            break;

        default:

            events.emit('warn', `The theme property "${themeKey}" does not exist`);

        }

    });

    fs.writeFileSync(locations.themes, themes.write({ indent: 4 }), 'utf-8');

    events.emit('verbose', 'Wrote out Android application themes to ' + locations.themes);
}

在splashScreenTheme.find function on foreach，有人可以帮我吗？

Answer 1

您必须从您的应用程序的 config.xml 中删除启动画面，此链接如下

会帮助你：

https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11

Answer 2

实际上，我现在并没有解决问题，而是向前迈出了一小步。

错误发生在node_modules\cordova-android\lib\prepare.js方法中：updateProjectSplashScreen(...)，因为var splashScreenTheme是null，因为theme (= style[@name=" Theme.App.SplashScreen "])未找到或 var themeTargetNode为 null，因为未找到主题项。

我在platforms/android/app/src/main/res/values目录中的themes.xml （& colors.xml）中手动添加了主题，内容如下：

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <style name="Theme.App.SplashScreen" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <!-- Set the splash screen background -->
        <!-- <item name="android:windowBackground">@android:color/white</item> -->
        <item name="windowSplashScreenBackground">@color/cdv_splashscreen_background</item>
        
        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_cdv_splashscreen</item>
        
        <!-- Required for animated icons -->
        <item name="windowSplashScreenAnimationDuration">200</item>
        
        <!-- Required: Set the theme of the Activity that directly follows your splash screen. -->
        <!-- <item name="postSplashScreenTheme">@style/Theme.App</item> -->
        <item name="postSplashScreenTheme">@style/Theme.AppCompat.NoActionBar</item>
    </style>
</resources>

colors.xml的内容：

<?xml version='1.0' encoding='utf-8'?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="cdv_splashscreen_background">#FFFFFF</color>
</resources>

这解决了构建期间的错误，但是应用程序在启动时在启动屏幕上崩溃而没有错误。 我想我错误地配置了主题。 我希望这里的任何人都可以更正themes.xml文件。

PS：离子论坛中发布了同样的问题： https://forum.ionicframework.com/t/ionic-android-12-splash-error-while-adding-cordova-android-11/225896 。

PPS：我必须修复离子迁移指南中未提及的 2 个其他问题（ https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11 ）：

• Did NOT remove cordova-plugin-androidx-adapter to prevent errors like: package android.support.v4.content does not exist or package android.support.v7.app does not exist.
• Changed compile to implementation in some old plugins' gradle files (in platforms/android/ cordova-plugin-badge /XXX-badge.gradle, com-sarriaroman-photoviewer /XXX-photoviewer.gradle & phonegap-plugin-barcodescanner /XXX-barcodescanner .gradle)

我通过在package.json中使用“离子构建脚本之前”自动进行所有更正，例如：

 "scripts": { "ionic:build:before": "./scripts/fix_android.sh", ... }

scripts/fix_android.sh的内容：

#!/usr/bin/env bash
echo ""
echo "Executing fix_android.sh"

## Copy resources/android/colors.xml & themes.xml to platforms/android/app/src/main/res/values
target=platforms/android/app/src/main/res/values
if [ -d "$target" ]; then
    file4="resources/android/colors.xml"
    if [ -f "$file4" ]; then
      cp -rvf "$file4" platforms/android/app/src/main/res/values
      echo "Copied colors.xml"
    else
      echo ${file4}" not found!"
    fi
    file5="resources/android/themes.xml"
    if [ -f "$file5" ]; then
      cp -rvf "$file5" platforms/android/app/src/main/res/values
      echo "Copied themes.xml"
    else
      echo ${file5}" not found!"
    fi
else
    echo ${target}" not found!"
fi

## Change compile to implementation in old plugins' gradle files
file6="platforms/android/cordova-plugin-badge/XXX-badge.gradle"
if [ -f "$file6" ]; then
    if grep -lr "compile" "$file6"; then
        sed -i '' "s/compile/implementation/g" "$file6"
        echo "Changed compile to implementation in XXX-badge.gradle"
    else
        echo "$file6"
        echo "File already corrected!"  
    fi
else
    echo ${file6}" not found!"
fi
file7="platforms/android/com-sarriaroman-photoviewer/XXX-photoviewer.gradle"
if [ -f "$file7" ]; then
    if grep -lr "compile" "$file7"; then
        sed -i '' "s/compile/implementation/g" "$file7"
        echo "Changed compile to implementation in XXX-photoviewer.gradle"
    else
        echo "$file7"
        echo "File already corrected!"
    fi  
else
    echo ${file7}" not found!"
fi
file8="platforms/android/phonegap-plugin-barcodescanner/XXX-barcodescanner.gradle"
if [ -f "$file8" ]; then
    if grep -lr "compile" "$file8"; then
        sed -i '' "s/compile/implementation/g" "$file8"
        echo "Changed compile to implementation in XXX-barcodescanner.gradle"
    else
        echo "$file8"
        echo "File already corrected!"  
    fi
else
    echo ${file8}" not found!"
fi

## Remove all <splash> tags from config.xml
file9="config.xml"
if [ -f "$file9" ]; then
    if grep -lr "<splash" "$file9"; then
        sed -i '' "s/<splash .* \/>//g" "$file9"
        echo "Removed <splash> tags in config.xml"
    else
        echo "$file9"
        echo "File already corrected!"  
    fi
else
    echo ${file9}" not found!"
fi

echo ""
echo ""

Answer 3

如果它可以帮助任何人，我发现我正在使用的插件之一（特别是cordova-plugin-telerik-imagepicker）正在编写自己的themes.xml文件到app/src/main/res/values覆盖由生成的模板Cordova。

这就是为什么 Cordova 在尝试更新不再存在的themes.xml中的元素时崩溃的原因。xml。

我通过分叉插件并删除它的主题来解决它themes.xml 。 不确定这对插件有什么影响，但我不怀疑...