Ionic with Capacitor 在飛濺后移除白屏？

Question

試圖解決啟動畫面加載后的白屏問題，我們如何刪除它？ 我試圖設置超時但仍然無法正常工作。

使用 cordova 我可以設置它，但我無法使用電容器

Answer 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 將解決這個問題......

Answer 2

您可以使用backgroundColor更改capacitor.config中的顏色。

{
    "appId": "io.ionic.starter",
    "appName": "app",
    "webDir": "build",
    "bundledWebRuntime": false,
    "backgroundColor": "#ff0000" // <-- here
}

您不需要下載額外的 package “@capacitor/SplashScreen” 哈哈。

免責聲明：我代表的是 Capacitor v3 和 Ionic v5

Answer 3

電容器 3+ / 離子 5+ / Angular 12+

這對我有用：

電容器.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);
  }

Answer 4

我有同樣的問題。

安裝splashScreen插件所需的控制電容器。

這對我有用：

npm i --save @capacitor/splash-screen

電容器.config.json //.ts

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

app.component.ts

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

Answer 5

我遇到了同樣的問題，上述解決方案對我的情況不起作用。

對我有幫助的是在生產模式下啟動：

ionic build --prod --release

代替

ionic build

啟動畫面一結束，主頁就會出現。 (離子/angular/電容)