Ionic + Capacitor 3 + Android 短暂显示扭曲的飞溅图像

Question

如果您使用@capacitor/splash-screen API 在带有 Capacitor 3 的 Ionic Android 应用程序中显示启动画面，您可能会遇到以下问题：

问题

在几分之一秒内，飞溅图像将扭曲显示，直到以正确的纵横比显示。这意味着它也会在屏幕上“跳跃”一点，如果您在设备处于横向时启动应用程序，或者您的设备已拉伸或显示宽高比，这将特别明显。

背景信息

发生这种情况是因为AppTheme.NoActionBarLaunch在应用程序启动时使用它MainActivity被设置为将启动图像作为背景图像，但“真实”启动图像在几毫秒后在SplasScreen.buildViews()插件的方法中被初始化。

解决方案

要修复它，您可以在您的styles.xml文件中更改以下内容/android/app/src/main/values：

老的：

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>

新（无背景）：

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@null</item>
    </style>

或者设置启动画面的背景颜色：

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">#ffffff</item>
    </style>

这将防止在将实际 ImageView 添加到视图层次结构之前将启动图像显示为背景图像。ImageView 将具有androidScaleType插件配置中定义的正确 scaleType 。

使用以下版本进行测试：

• @电容器/机器人：3.0.0-rc.0
• @电容器/闪屏：0.3.6
• @离子/角度：5.6.3

使用以下配置：

const config: CapacitorConfig = {
    // ...
    plugins: {
        SplashScreen: {
            launchShowDuration: 3000,
            launchAutoHide: false,
            backgroundColor: '#ffffffff',
            androidSplashResourceName: 'splash',
            androidScaleType: 'CENTER_CROP',
            showSpinner: false,
            splashFullScreen: false,
            splashImmersive: false,
        },
    },
    // ...
};

注意：SplashScreen.show()TypeScript（Ionic）代码不需要调用，会自动显示。SplashScreen.hide()一旦您想隐藏 SplashScreen，只需调用您的 TypeScript 代码。

Answer 1

上述解决方法不适用于需要透明背景的社区条形码扫描仪。

我的解决方法（空白屏幕的缺点仍然存在，但它有效）：

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/white</item>
    </style>
    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar"></style>