Ionic&amp；电容器-Android闪屏响应性 [英] Ionic & Capacitor - Android Splash Screen Responsiveness

问题描述

上下文

这与闪屏图像的响应性有关，根据我的研究，这只是因为Capacitor Docs - Splash Screen缺少文档而发生的。

问题

该问题是在实现电容器闪屏插件时出现的。通常，当您创建整个项目时，此实现是从头开始的。然而，它在宽高比拉伸的设备(例如Google Pixel 2 XL)或宽高比胖的设备(例如iPad Pro)上不能/不能很好地工作。甚至在某些情况下，闪屏图像会四处移动或缩小/展开(加载时)。

直观说明

换句话说，本机实现使闪屏图像如下图所示。如果设备被拉伸或变胖，则不会保留图像的纵横比。

推荐答案

所以我们的目标是不让这些图像被拉伸或变胖。要像标准纵横比图像中那样保留图像。要解决此问题并使开机画面对各种屏幕设备和高宽比做出响应，您必须进行以下操作：

• Capacitor.config.json(离子项目)
• App.Component.ts(离子项目)
• style es.xml(Android项目)

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

{
 ...

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

...
}

#2应用组件TS(离子项目)

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

这篇关于Ionic&amp；电容器-Android闪屏响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！