离子与电容器在飞溅后去除白屏？答案

【问题标题】：Ionic with Capacitor removing white screen after splash?离子与电容器在飞溅后去除白屏？
【发布时间】：2021-04-21 08:38:49
【问题描述】：

尝试解决闪屏后的白屏问题，然后加载，我们如何删除它？我尝试设置超时但仍然无法正常工作。

使用cordova我可以设置它，但我使用电容器失败

【问题讨论】：

你到底在哪里失败了？您应该编辑您的问题并解释它，并可能显示一些代码。这会增加您获得有用答案的机会。
应用程序加载时会显示启动画面，然后在完全加载应用程序之前显示白屏。你能帮忙吗？
如@marsh-wiggle 所说，添加一些代码截图。特别是您在 app.component.ts.. 中的 ngOnInit() 方法。必须有一些导致白屏的阻塞代码。

标签： ionic-framework capacitor

【解决方案1】：

试试这个。

capacitor.config.json - 关于插件

"plugins": {
            "SplashScreen": {
              "launchShowDuration": 5000,
              "launchAutoHide": true,
              "androidScaleType": "CENTER_CROP",
              "androidSplashResourceName": "splash",
              "splashFullScreen": false,
              "splashImmersive": false
            }
          },
          "android": {
            "allowMixedContent": true
          }

然后在android/app/src/main/res/values/styles.xml文件中：

更改以下内容：

<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">@drawable/splash</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsTranslucent">true</item>
   </style>

launchShowDuration 可能是您所追求的。如果您确实遇到了启动图像宽度被拉伸的问题，xml 将解决这个问题...

【讨论】：

根据你的方法，即使在闪屏之后状态栏也是隐藏的。

【解决方案2】：

电容 3+/离子 5+/角 12+

这对我有用：

capacitor.config.json

 "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "showSpinner": true
    }
  }

app.component.ts

 ngOnInit(): void {
    this.initializeApp();
  }

 private initializeApp(): void {
   
    // other code here

    setTimeout(() => {
      SplashScreen.hide();
    }, 2000);
  }

【讨论】：

【解决方案3】：

我遇到了同样的问题。

安装splashScreen插件所需的控制电容。

这对我有用：

npm i --save @capacitor/splash-screen

capacitor.config.json // .ts

"plugins": {
"SplashScreen": {
  "launchShowDuration": 10000,
  "launchAutoHide": false
}}

app.component.ts

import {SplashScreen} from '@capacitor/splash-screen';
setTimeout(() => {
    SplashScreen.hide();
  }, 2000);

【讨论】：