android - Ionic & Capacitor - Android 闪屏响应

Question

语境
这与闪屏图像响应性有关，根据我的研究，它只是因为在 Capacitor Docs - Splash Screen 处缺少文档而发生。 .
问题
当实现电容器的闪屏插件时，问题就开始了。通常，当您创建整个项目时，此实现是从头开始的。但是，它在具有 的设备上不能/没有很好地工作。拉伸(stretch)纵横比(例如 Google Pixel 2 XL)或具有 的设备胖 纵横比(例如 iPad Pro)。甚至在某些情况下，初始屏幕图像会四处移动或缩小/扩展(在加载时)。
视觉解释
换句话说， native 实现导致启动屏幕图像就像下图一样。如果设备被拉伸(stretch)或变胖，则不会保留图像纵横比。

Answer 1

所以目标是不要让这些图像被拉伸(stretch)或变胖。保留 中的图像标准纵横比 图片。要解决此问题并使启动图像响应屏幕设备和纵横比的天文多样性，您将必须操作:

电容器.config.json( ionic 项目)

app.component.ts( ionic 项目)

styles.xml (Android 项目)

#1 电容器配置 JSON( ionic 项目)

{
 ...

    "plugins": {
        "SplashScreen": {
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
            "splashFullScreen": true,
            "splashImmersive": false,
            "backgroundColor": "#ffffff" // YOUR SPLASH SCREEN MAIN COLOR
        }
    }

...
}

#2 应用组件 TS( ionic 项目)

import { Plugins } from '@capacitor/core'
const { SplashScreen } = Plugins;
...

export class AppComponent implements OnInit {
    ...

    // DON'T USE SPLASHSCREEN SHOW METHOD ANYWHERE
    // SplashScreen.show(); 

    initializeApp() {
        this.platform.ready().then(async () => {
            SplashScreen.hide();
        });
    }
}

#3 Styles.xml(Android 项目)

<?xml version="1.0" encoding="utf-8"?>
<resources>
...

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowNoTitle">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
<resources>

就是这样!所有图像现在都保留了纵横比，并且它们将始终响应所有设备。
引用

https://capacitorjs.com/docs/apis/splash-screen

https://github.com/ionic-team/capacitor/issues/1627#issuecomment-650835957

https://github.com/ionic-team/capacitor/issues/1627#issuecomment-707188787