ionic2 解決白屏問題

ionic2下創建項目后，運行啟動頁后白屏幾秒，解決方案

 

問題描述

最近在學習過程中發現ionic2項目運行在真機上，啟動頁后會有3-5秒的白屏時間，用戶體驗不是太好。

解決過程

查看到了一篇關於這個問題的博客，但是是ionic1版本下的解決方案，有些差異，在查詢ionic官方文檔后，找到了ionic2版本的解決方案。
ionic1版本解決方案原址：http://blog.csdn.net/dounainaicsdn/article/details/50767667

步驟

1.首先我們要先添加這個cordova組件

$ cd 項目根目錄

$ cordova plugin add cordova-plugin-splashscreen

2.然后可以更換我們的啟動頁面，配置config.xml文件（可略過，不更換也可）

在 <platform name="android">標簽里面添加下面的代碼：

<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>

<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>

<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>

<splash src="resources/android/splash/drawable-land-xhdpi-screen.png"density="land-xhdpi"/>

 

<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>

<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>

<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>

<splash src="resources/android/splash/drawable-port-xhdpi-screen.png"density="port-xhdpi"/>

3.接下來我們就要配置啟動頁面的一些屬性了，在config.xml追加以下屬性：

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

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

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

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

  <preference name="SplashScreenDelay" value="6000"/>

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

這些屬性的名字都很直觀，可以大致了解什么意思，官方文檔上也有講這個，不懂可以去看看：

4.最后我們在app.ts文件下，手動調用splashscreen的hide()方法即可

打開app目錄下的app.ts文件
首先導入Splashscreen

 import { Splashscreen } from 'ionic-native';

接下來在函數里調用 Splashscreen.hide()

    platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.

      // Here you can do any higher level native things you might need.