Cordova：如何使用一种配置在 Android 和 iOS 上显示启动画面？

Question

我正在尝试使用 cordova 启动屏幕插件显示启动屏幕：

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

所以我在顶级 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" />
  <preference name="SplashScreenDelay" value="20000" />

然后进入 app.js

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

问题是没有显示启动画面。我试图在这里找到任何可行的解决方案：

http://forum.ionicframework.com/t/need-help-with-displaying-splash-screen-on-android-cordova-3-6/10436/11

但没有运气。

插件文档非常不清楚。

请问如何解决？

非常感谢您的建议。

Answer 1

TL;WR 解决方案：尝试删除您的 iOS 平台并重新添加。

有时间吗？将科尔多瓦 5.x 升级到 6.0 时，我遇到了同样的问题。这是我为解决它所做的：

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 中添加了以下几行：

   <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" />
   

6. 我跑了cordova build ios

确保 www/images/test.png 是一个路径并且它包含资源。

另外，我没有尝试对所有分辨率只使用一张图像（您似乎只使用了 test.png），所以不确定这是否是一个问题，我实际上创建了具有正确尺寸和分辨率的所有图像。

希望对你有帮助。