在splashscreen,Ionic2,android设备之后的白色屏幕

Question

我目前正在开发Ionic2应用程序.我遇到一个问题,在Splash屏幕之后,在app主屏幕之前有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

Answer 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.

Answer 2

更新离子项目并改变一些偏好对我来说是个窍门.

这里有changelog和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 -然后,我必须复制/粘贴一些代码,已经从最近修改这里到我的项目(离子型2演示和最新的应用程序-检查Github上).

现在应用程序启动成功,没有长时间的闪屏.

PS:

• livereview: ionic run android -l
• 生产: ionic run android --prod --release
• 请记住,你必须手动隐藏启动画面(如@Markus瓦格纳说)你app.component.ts:this.platform.ready().then(() => { Splashscreen.hide(); });

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