在splashscreen，Ionic2，android设备之后的白色屏幕 [英] White screen after splashscreen, Ionic2, android device

问题描述

我目前正在开发Ionic2应用。我遇到一个问题，在Splash屏幕之后，在app主屏幕之前有一个白色的屏幕，持续6-7秒。

I am currently developing Ionic2 app. I face a problem that after Splash screen, there is a white screen for 6-7 seconds, before app home screen.

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

I tried some googling but nothing works. My last attempt to solve is

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

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

请在这个问题上帮助我;

Please help me in this issue;

:我的离子信息是

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

推荐答案

更新离子项目并更改一些偏好设置对我而言。

Updating Ionic project and change some preferences did the trick for me.

这里更改日志和信息。

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

1 - Update to the latest version of the Ionic CLI, Cordova and Typescript:

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

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

2 - Update your package.json to match the following dependencies, remove existing node_modules directory, and then run 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 （实时审核即可）：

3 - Update your config.xlm with these preferences (live review is ok):

  <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 - 然后我复制/粘贴了一些最近从这里进入我的项目（Ionic 2演示和最新的应用程序 - 检查Github）。

4 - Then I have copy/pasted some code that had been modified recently from here into my project (Ionic 2 demo and up to date app - Check the Github).

现在，应用程序成功启动，没有长时间闪屏。

Now the application starts successfully without long splashscreen.

ps：

• livereview：离子运行android -l <​​/ code>


• 生产：离子运行android --prod --release


• 请记住，你必须手动隐藏你的启动画面（如@Markus Wagner所说） strong> app.component.ts ： this.platform.ready（）。then（（）=> {Splashscreen.hide（）;}）;

• livereview: ionic run android -l
• production: ionic run android --prod --release
• Remember that you have to hide manually the splashscreen (like @Markus Wagner said) in your app.component.ts: this.platform.ready().then(() => { Splashscreen.hide(); });

编辑：更新至Ionic v3.1.1（2017-04-28）

Update to Ionic v3.1.1 (2017-04-28)

这篇关于在splashscreen，Ionic2，android设备之后的白色屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！