闪屏后的白屏，Ionic 2，android 设备答案

【问题标题】：White screen after splashscreen, Ionic2, android device闪屏后的白屏，Ionic 2，android 设备
【发布时间】：2017-01-09 08:42:32
【问题描述】：

我目前正在开发 Ionic2 应用程序。我遇到的问题是在启动屏幕之后，在应用主屏幕之前有 6-7 秒的白屏。

我尝试了一些谷歌搜索，但没有任何效果。我最后一次尝试解决的是

    hideSplashScreen() {
    if(Splashscreen){
      setTimeout(() => {
        Splashscreen.hide();
      },100)
    }
  };//

<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>

请帮我解决这个问题；

编辑:: 我的ionic info 是

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.8.6 
OS: OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 7.2 Build version 7C68

【问题讨论】：

您使用的是哪个 RC 版本的 ionic？
请参阅编辑。
我升级到 RC5 并从官方 ionic 应用程序更改/复制 config.xml 中的一些代码，问题似乎没有任何技巧就解决了，现在可以正确快速地加载。如果您需要更多详细信息，我可以添加带有信息的回复。
@mosca90 ，您能发布完整的答案吗？

标签： ionic2

【解决方案1】：

默认情况下，启动屏幕会在 3 秒后隐藏（请参阅https://github.com/apache/cordova-plugin-splashscreen#configxml）。但可能此时您的应用还没有准备好。

因此，我始终将以下首选项添加到我的 config.xml：

<preference name="AutoHideSplashScreen" value="false"/>

相反，我会在应用准备就绪后手动隐藏它：

this.platform.ready().then(() => {
    Splashscreen.hide();
});

这适用于 iOS 和 Android。

【讨论】：

【解决方案2】：

更新 Ionic 项目 并更改一些偏好对我有用。

这里是changelog and infos。

1 - 更新到最新版本的 Ionic CLI、Cordova 和 Typescript：

npm uninstall -g ionic cordova typescript
npm install -g ionic cordova typescript

2 - 更新您的 package.json 以匹配以下依赖项，删除现有 node_modules 目录，然后运行 npm install:

  "scripts": {
    "build": "ionic-app-scripts build",
    "clean": "ionic-app-scripts clean",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/in-app-browser": "3.6.1",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.8.9"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.6",
    "typescript": "2.3.2"
  }

3 - 使用这些首选项更新您的 config.xlm（可以实时查看）：

  <preference name="loadUrlTimeoutValue" value="700000"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="StatusBarStyle" value="default"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="orientation" value="default"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <preference name="SplashScreenDelay" value="3000"/>

4 - 然后我将最近从 here 修改过的一些代码复制/粘贴到我的项目中（Ionic 2 演示和最新的应用程序 - 检查 Github）。

现在应用程序成功启动，没有长的启动画面。

ps：

直播评论：ionic run android -l
制作：ionic run android --prod --release
请记住，您必须在 app.component.ts 中手动隐藏启动画面（如 @Markus Wagner 所说）：this.platform.ready().then(() => { Splashscreen.hide(); });

编辑：更新到 Ionic v3.1.1 (2017-04-28)

【讨论】：

谢谢，我今天试试。
它有效，我只在android上检查过，但直到现在还没有在IOS上检查过。将检查 Ios 并接受这个作为答案。
告诉我，我也对 iOS 感兴趣 :)

【解决方案3】：

在以下任何 CLI 命令期间添加 --prod 标志：

// If iOS
ionic emulate ios --prod
ionic build ios --prod
ionic run ios --prod


// If Android
ionic emulate android --prod
ionic build android --prod
ionic run android --prod

为给定平台构建（准备 + 编译）Ionic 项目的更多信息 https://ionicframework.com/docs/cli/cordova/build/

【讨论】：

【解决方案4】：

我已经通过在 config.xml 上设置正确的参数解决了这个问题

 <preference name="AutoHideSplashScreen" value="false" />
 <preference name="SplashScreenDelay" value="10000" />
 <preference name="FadeSplashScreenDuration" value="1000" />
 <preference name="SplashScreen" value="screen" />
 <preference name="ShowSplashScreen" value="true" />
 <preference name="ShowSplashScreenSpinner" value="false" />
 <preference name="SplashShowOnlyFirstTime" value="false" />
 <preference name="FadeSplashScreen" value="true" />

然后，在我的 platform.ready() 指令中，我所做的就是 Splashscreen.hide();

【讨论】：