Cordova:如何通过一种配置在Android和iOS上显示启动屏幕? [英] Cordova : How to display splash screen on Android and iOS with one configuration?

问题描述

我正在尝试使用cordova启动画面插件显示启动画面:

I'm trying to display splash screen using the cordova splashscreen plugin:

https://github.com/apache/cordova-plugin-splashscreen

所以我在顶级config.xml文件中添加了以下几行:

So i added in top level config.xml file following lines:

    <platform name="android">
      <icon src="res/android/drawable-ldpi/ic_launcher.png" density="ldpi" />
      <icon src="res/android/drawable-mdpi/ic_launcher.png" density="mdpi" />
      <icon src="res/android/drawable-hdpi/ic_launcher.png" density="hdpi" />
      <icon src="res/android/drawable-xhdpi/ic_launcher.png" density="xhdpi" />
      <!-- you can use any density that exists in the Android project -->
      <splash src="www/images/test.png" density="land-hdpi"/>
      <splash src="www/images/test.png" density="land-ldpi"/>
      <splash src="www/images/test.png" density="land-mdpi"/>
      <splash src="www/images/test.png" density="land-xhdpi"/>
      <splash src="www/images/test.png" density="port-hdpi"/>
      <splash src="www/images/test.png" density="port-ldpi"/>
      <splash src="www/images/test.png" density="port-mdpi"/>
      <splash src="www/images/test.png" density="port-xhdpi"/>
    </platform>
    <platform name="ios">
      <!-- images are determined by width and height. The following are supported -->
      <splash src="www/images/test.png" width="320" height="480"/>
      <splash src="www/images/test.png" width="640" height="960"/>
      <splash src="www/images/test.png" width="768" height="1024"/>
      <splash src="www/images/test.png" width="1536" height="2048"/>
      <splash src="www/images/test.png" width="1024" height="768"/>
      <splash src="www/images/test.png" width="2048" height="1536"/>
      <splash src="www/images/test.png" width="640" height="1136"/>
      <splash src="www/images/test.png" width="750" height="1334"/>
      <splash src="www/images/test.png" width="1242" height="2208"/>
      <splash src="www/images/test.png" width="2208" height="1242"/>
    </platform>
 <preference name="SplashScreen" value="screen" />
  <preference name="SplashScreenDelay" value="20000" />

进入app.js

.run(function($ionicPlatform, $rootScope) {
  $ionicPlatform.ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
      navigator.splashscreen.show();
    }

问题是没有显示任何初始屏幕.我试图在这里找到任何可行的解决方案:

Problem is that no splash screen is displayed. I tried to find any working solution here:

但是没有运气.

插件文档还不清楚.

我该如何解决?

非常感谢您的任何建议.

Many thanks for any advice.

推荐答案

TL; WR解决方案:尝试删除您的iOS平台，然后再次添加.

TL;WR solution: try removing your iOS platform and add it again.

有时间吗?将cordova 5.x升级到6.0时，我遇到了同样的问题.这是我为解决该问题所做的事情:

Have time? I had the same problem when upgrading cordova 5.x to 6.0. This is what I did to solve it:

1. 如果使用的是Phonegap，则删除了平台cordova platform remove ios或phonegap platform remove iOS.
2. (对于那些使用Phonegap的用户):我删除了
3. 添加了插件cordova plugin add cordova-plugin-splashscreen
4. 使用cordova CLI添加了平台:cordova platform add ios

5. 在主config.xml中添加了以下几行:

1. Removed the platforms cordova platform remove ios or phonegap platform remove iOS if you are using Phonegap.
2. (for those using Phonegap): I removed the
3. Added the plugin cordova plugin add cordova-plugin-splashscreen
4. Added the platforms using cordova CLI: cordova platform add ios

5. Added the following lines to the main config.xml:

<platform name="android">
<icon src="res/android/drawable-ldpi/ic_launcher.png" density="ldpi" />
<icon src="res/android/drawable-mdpi/ic_launcher.png" density="mdpi" />
<icon src="res/android/drawable-hdpi/ic_launcher.png" density="hdpi" />
<icon src="res/android/drawable-xhdpi/ic_launcher.png" density="xhdpi" />
<!-- you can use any density that exists in the Android project -->
<splash src="www/images/test.png" density="land-hdpi"/>
<splash src="www/images/test.png" density="land-ldpi"/>
<splash src="www/images/test.png" density="land-mdpi"/>
<splash src="www/images/test.png" density="land-xhdpi"/>
<splash src="www/images/test.png" density="port-hdpi"/>
<splash src="www/images/test.png" density="port-ldpi"/>
<splash src="www/images/test.png" density="port-mdpi"/>
<splash src="www/images/test.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
<!-- images are determined by width and height. The following are supported -->
<splash src="www/images/test.png" width="320" height="480"/>
<splash src="www/images/test.png" width="640" height="960"/>
<splash src="www/images/test.png" width="768" height="1024"/>
<splash src="www/images/test.png" width="1536" height="2048"/>
<splash src="www/images/test.png" width="1024" height="768"/>
<splash src="www/images/test.png" width="2048" height="1536"/>
<splash src="www/images/test.png" width="640" height="1136"/>
<splash src="www/images/test.png" width="750" height="1334"/>
<splash src="www/images/test.png" width="1242" height="2208"/>
<splash src="www/images/test.png" width="2208" height="1242"/>
</platform>
<preference name="SplashScreen" value="screen" />

我跑了cordova build ios

确保www/images/test.png是路径，并且包含资源.

Make sure www/images/test.png is a path and it contains the resource.

此外，我并没有尝试只为所有分辨率使用一张图像(您似乎只是在使用test.png)，所以不确定是否有问题，实际上我创建了所有具有正确尺寸和分辨率的图像.

Also, I did not try using only one image for all the resolutions (you only appear to be using test.png), so not sure if that's a problem, I actually created all the images with their proper dimensions and resolutions.

希望有帮助.

这篇关于Cordova:如何通过一种配置在Android和iOS上显示启动屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！