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/电容)