ionic2 splashscreen不可见

Question

我一直在试图给我的ionic2 sidemenu项目添加一个自定义初始屏幕。但是，当我在命令提示符下运行命令“ionic serve -l”时，我看到了我的应用程序的主页本地主机而不是闪屏。 程序I，接着类似于这里所描述的一个：https://www.youtube.com/watch?v=x04rztL2eIs

1. 首先我删除在资源文件夹的默认离子图标和splash.png图像与所述机器人和IOS文件夹内的文件夹溅沿。
2. 然后我已将指定尺寸的.png图像添加到资源文件夹。
3. 然后，我运行了命令“离子资源android - splash”和“离子资源ios - splash”，它们分别与图像自动创建ios和android文件夹中的splash文件夹。
4. 我已经设置了函数“Splashscreen.show（）;”在app.component.ts 我甚至在config.xml文件中将默认值设置为3000。

在做完所有这些之后，我在命令提示符下运行了命令“ionic serve -l”，但它仍然显示了我的sidemenu应用程序的主页而不是启动画面。

app.component.ts file 
    import { Component, ViewChild } from '@angular/core'; 
import { Nav, Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { Page1 } from '../pages/page1/page1'; 
import { Page2 } from '../pages/page2/page2'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = Page1; 

    pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Page One', component: Page1 }, 
     { title: 'Page Two', component: Page2 } 
    ]; 

    } 

    initializeApp() { 
    this.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. 
     StatusBar.styleDefault(); 
     Splashscreen.show(); 
    }); 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 
} 

config.xml file 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>V2 Test</name> 
    <description>An awesome Ionic/Cordova app.</description> 
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author> 
    <content src="index.html"/> 
    <access origin="*"/> 
    <allow-navigation href="http://ionic.local/*"/> 
    <allow-intent href="http://*/*"/> 
    <allow-intent href="https://*/*"/> 
    <allow-intent href="tel:*"/> 
    <allow-intent href="sms:*"/> 
    <allow-intent href="mailto:*"/> 
    <allow-intent href="geo:*"/> 
    <platform name="android"> 
    <allow-intent href="market:*"/> 
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/> 
    <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"/> 
    </platform> 
    <platform name="ios"> 
    <allow-intent href="itms:*"/> 
    <allow-intent href="itms-apps:*"/> 
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/> 
    </platform> 
    <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="SplashMaintainAspectRatio" value="true"/> 
    <preference name="FadeSplashScreenDuration" value="3000"/> 
    <preference name="SplashShowOnlyFirstTime" value="false"/> 
    <preference name="SplashScreen" value="screen"/> 
    <preference name="SplashScreenDelay" value="3000"/> 
    <feature name="StatusBar"> 
    <param name="ios-package" onload="true" value="CDVStatusBar"/> 
    </feature> 
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/> 
    <plugin name="cordova-plugin-whitelist" spec="1.3.1"/> 
    <plugin name="cordova-plugin-console" spec="1.0.5"/> 
    <plugin name="cordova-plugin-statusbar" spec="2.2.1"/> 
    <plugin name="cordova-plugin-device" spec="1.1.4"/> 
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/> 
</widget> 

我读过，我们需要观察它真正需要的闪screen.Is Android仿真器和iOS模拟器在互联网上？

请帮助我如何显示自定义的splashscreen。

Answer 1

我在网上看过我们需要一个android模拟器和ios 模拟器来查看启动画面。它真的需要吗？

是的。您需要在模拟器或实际设备中运行splashscreen。

因为它实际上是一个通过Ionic Native导入的cordova插件。 链接here。 科尔多瓦插件通常在ionic serve中被禁用，因为它们专门用于使用移动设备的功能。 您似乎已经遵循了所有步骤。在模拟器中运行并检查。

根据this link在Github上， 溅射屏幕设置是否放置在你的config.xml 是自动显示。您必须致电Splashscreen.hide()。所以

initializeApp() { 
    this.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. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    }