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

Posted 2023-02-19

【中文标题】离子与电容器在飞溅后去除白屏？

【英文标题】：Ionic with Capacitor removing white screen after splash?

【发布时间】：2021-04-21 08:38:49

【问题描述】：

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

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

【问题讨论】：

你到底在哪里失败了？您应该编辑您的问题并解释它，并可能显示一些代码。这会增加您获得有用答案的机会。

应用程序加载时会显示启动画面，然后在完全加载应用程序之前显示白屏。你能帮忙吗？

如@marsh-wiggle 所说，添加一些代码截图。特别是您在 app.component.ts.. 中的 ngOnInit() 方法。必须有一些导致白屏的阻塞代码。

【参考方案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);