问题
I use Phonegap for over a year and I had no problem with my Splashscreen until now. I decided to move from 3.7.0 to cli-5.2.0 (I think it would make no difference even if it was cli-5.1.1) and I cannot make my SplashScreen work.
I have read here that in cli-5.1.1 and above you need the new splashscreen plugin from npm in order to make it work (until now all I had to do was to specify the paths of splashscreen images).
So my config file ended up in something like this:
<gap:splash gap:qualifier="port-ldpi" gap:platform="android" src="res/screen/android/splash-port-ldpi.png" width="320" height="426" />
<gap:splash gap:qualifier="port-mdpi" gap:platform="android" src="res/screen/android/splash-port-mdpi.png" width="320" height="470" />
<gap:splash gap:qualifier="port-hdpi" gap:platform="android" src="res/screen/android/splash-port-hdpi.png" width="480" height="640" />
<gap:splash gap:qualifier="port-xhdpi" gap:platform="android" src="res/screen/android/splash-port-xdpi.png" width="720" height="960" />
.....
<gap:splash src="res/screen/ios/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/Default@2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="748" />
<gap:splash src="res/screen/ios/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1496" />
<gap:splash src="res/screen/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1004" />
<gap:splash src="res/screen/ios/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2008" />
<!-- splashscreen delay -->
<preference name="SplashScreenDelay" value="5000" />
<preference name="ShowSplashScreen" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false"/>
<preference name="phonegap-version" value="cli-5.2.0" />
.....
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
I tried too many versions that I cannot even remember them. Can anyone see where the problem is, or has to suggest anything else?
I want to specify that I do not use any default SplashScreen image (I tried to set one, but I had no luck. Besides until 3.7.0 it had no use, so why to have now) and I do not use any kind of javascript to show/hide the splashscreen.
When my app starts, it shows a black screen for about 5sec(the time the splashscreen should appear) and then my app starts normally from the first screen
EDITED:
The full config file is the following
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "hxxp://www.w3.org/ns/widgets"
xmlns:gap = "hxxp://phonegap.com/ns/1.0"
id = "..."
versionCode = "100"
version = "1.0.0">
<name>...</name>
<description>...</description>
<author href="..." email="...">...</author>
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>1.0.0</string>
</gap:config-file>
<!-- ANDROID ICONS -->
<icon density="mdpi" gap:platform="android" src="res/android/icon-48-mdpi.png" width="48" height="48" />
<icon density="hdpi" gap:platform="android" src="res/android/icon-72-hdpi.png" width="72" height="72" />
<icon density="xhdpi" gap:platform="android" src="res/android/icon-96-xhdpi.png" width="96" height="96" />
<icon density="xxhdpi" gap:platform="android" src="res/android/icon-144-xxhdpi.png" width="144" height="144" />
<gap:splash gap:qualifier="port-ldpi" gap:platform="android" src="res/screen/android/splash-port-ldpi.png" width="320" height="426" />
<gap:splash gap:qualifier="port-mdpi" gap:platform="android" src="res/screen/android/splash-port-mdpi.png" width="320" height="470" />
<gap:splash gap:qualifier="port-hdpi" gap:platform="android" src="res/screen/android/splash-port-hdpi.png" width="480" height="640" />
<gap:splash gap:qualifier="port-xhdpi" gap:platform="android" src="res/screen/android/splash-port-xdpi.png" width="720" height="960" />
<!-- IOS ICONS -->
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="res/ios/icon-60@2x.png" gap:platform="ios" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="res/ios/icon-76@2x.png" gap:platform="ios" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="res/ios/icon-40@2x.png" gap:platform="ios" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="res/ios/icon@2x.png" gap:platform="ios" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/ios/icon-72@2x.png" gap:platform="ios" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="res/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="res/ios/icon-50@2x.png" gap:platform="ios" width="100" height="100" />
<gap:splash src="res/screen/ios/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/Default@2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="748" />
<gap:splash src="res/screen/ios/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1496" />
<gap:splash src="res/screen/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1004" />
<gap:splash src="res/screen/ios/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2008" />
<!-- splashscreen delay -->
<preference name="SplashScreenDelay" value="5000" />
<preference name="ShowSplashScreen" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false"/>
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="fullscreen" value="false" />
<preference name="LoadUrlTimeoutValue" value="10000"/>
<preference name="AllowInlineMediaPlayback" value="true"/>
<preference name="KeepRunning" value="true"/>
<access origin="*" />
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.Device"/>
</feature>
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.NetworkManager"/>
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification"/>
</feature>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
<gap:plugin name="cordova-plugin-inappbrowser" source="npm" />
</widget>
EDITED 2:
Today I tested it on IOS. The splashscreen shows up but the app stucks there. It does not disables the splashscreen after 5sec as it should do.
I cannot figure out what is happening. I am going back on 3.7.0 until it is solved.
回答1:
I'm having the same problem but I know an easy fix for your stuck iOS splashscreen:
In your main html file:
document.addEventListener("resume", onResume, false);
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
//Hide Splashscreen
navigator.splashscreen.hide();
I know you mentioned you don't use js to show/hide the splashscreen, but for iOS you are forced to :( (at least in my experience)
来源：https://stackoverflow.com/questions/32762995/splashscreen-not-working-on-phonegap-build-cli-5-2-0