Ionic应用程序启动画面未显示。

Question

Ionic应用程序启动画面未显示。

10

我一直在尝试为我的Ionic应用程序添加启动画面，但使用这个配置时，图标是有效的，但是启动画面不起作用。它只显示一个空白屏幕，甚至没有cordova默认的启动画面。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.toggle423609" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Toggle</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="http://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <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="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="false" />

  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <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-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <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-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
    <icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" height="1136" width="640"/>
    <splash src="resources/ios/splash/Default-667h.png" height="1334" width="750"/>
    <splash src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/>
    <splash src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/>
    <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" height="1536" width="2048"/>
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/>
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" height="2048" width="1536"/>
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/>
    <splash src="resources/ios/splash/Default@2x~iphone.png" height="960" width="640"/>
    <splash src="resources/ios/splash/Default~iphone.png" height="480" width="320"/>
  </platform>
</widget>

- sridharan

你是否已经将插件安装到你的项目中了？cordova plugin add org.apache.cordova.splashscreen - Steve Kennedy

插件“cordova-plugin-splashscreen”已经安装在设备上。插件“cordova-plugin-splashscreen”已经安装在iOS上，但它无法正常工作。 - sridharan

9个回答

11

以下是答案!!

如果您正在使用Cordova 6.4.0（在终端中键入cordova -v检查版本），则会遇到此问题（生成图标和启动画面后无法构建）

为了解决此问题，您有两个选项：

在config.xml中将单词density更改为qualifier。例如，用<icon src="resources\android\icon\drawable-ldpi-icon.png" qualifier="ldpi"/>替换<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>。构建项目，它会正常工作。
只需通过终端输入npm install -g cordova@6.3.1安装cordova版本6.3.1。删除然后添加平台，进一步构建即可。效果很好！！

祝好！ :p

- Sushree Moharana

我不知道为什么这个被踩了，但它解决了我的问题。我已经试了4天才弄清楚，而我需要做的只是更新一下我的Cordova。 - Andrei Neamtu

是的，它可以工作。将“density”更改为“qualifier”以适用于启动画面。 - Muhammad Hamizi Jaminan

6

移除和添加 Cordova 后

   $ cordova platform remove android (or ios)
   $ cordova platform add android (or ios)

你将会得到一个包含图标和启动画面的 /res 文件夹。将 /res 中的内容复制并粘贴到 platfomrs/android/res 中，这样就可以替换标准的图标和启动画面。

然后构建你的应用程序，你就会得到自定义的图片。

我使用了ionic tab模板，没有做任何修改。

- Lucas Isasmendi

对于我现在使用的ionic2，文件名不是drawable-port-xhdpi-screen.png，而是screen.png，并存储在单独的文件夹中，例如drawable-port-ldpi。必须手动复制粘贴并重命名它们。 - El Dude

5

我的启动画面也没有显示出来（Ionic 3）。我发现这个链接非常有帮助。对我来说，config.xml中的以下条目解决了问题：

<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>

- Ramon Rambo

4

自2016年11月7日以来，Cordova 6.4.0发布了新的Android版本 - android@6.1.0。

很可能您正在使用cordova中的android@5（或旧版本的android）。尝试更新/安装新版本的cordova android。

升级： cordova platform update android@6.1.0

显式添加它： cordova platform add android@6.1.0

https://cordova.apache.org/announcements/2016/11/07/android-release.html https://cordova.apache.org/blog/

- Shahar ドーン Levi

1

我曾经遇到过相同的问题，我通过手动前往路径MY_PROJECT\platforms\android\res并删除drawable*和mipmap*，然后从MY_PROJECT\res复制drawable*和mipmap*，最后重新构建项目来解决它。

- Bundit.Ng

1

我们尝试使用以下配置系统更新ionic应用程序的启动画面，但失败了：

Cordova CLI: 6.4.0 Ionic CLI版本：2.1.7 Ionic App Lib版本：2.1.4 ios-deploy版本：1.9.0 ios-sim版本：5.0.11 操作系统：macOS Sierra Node版本：v6.9.1 Xcode版本：Xcode 8.1 Build版本8B62

我们能够在以下配置系统中生成启动画面并解决问题：

Cordova CLI：6.3.1 Gulp版本：CLI版本3.9.1 Gulp本地：本地版本3.9.1 Ionic Framework版本：1.2.4 Ionic CLI版本：2.1.0 Ionic App Lib版本：2.1.0-beta.1 ios-deploy版本：未安装 ios-sim版本：未安装操作系统：Mac OS X El Capitan Node版本：v6.6.0 Xcode版本：Xcode 8.1 Build版本8B62

- Naushad Qamar

3

请勿在多个问题中发布完全相同的答案。请发布一个好的答案，然后投票/标记关闭其他问题作为重复。如果问题不是重复的，请根据问题调整您的答案。 - Paul Roub

0

使用以下命令在您的应用程序中添加闪屏 Cordova 插件

    $ionic cordova plugin add cordova-plugin-splashscreen
    $npm install --save @ionic-native/splash-screen

请在您的 config.xml 文件中添加以下行。

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

同时，在app.component.ts文件中删除SplashScreen.hide()

更多详细信息和示例请访问：https://answerdone.blogspot.com/2018/02/ionic-3-splash-screen-plugins.html

- Ganesh Garad

0

请检查您是否已安装“cordova-plugin-splashscreen”插件（在plugins/文件夹中或通过运行ionic cordova plugins（适用于Ionic v3+）或ionic plugins命令（旧版本的Ionic）进行安装）。

如果没有安装，请运行以下命令：
ionic plugin add cordova-plugin-splashscreen（Ionic v1 - v2）
ionic cordova plugin add cordova-plugin-splashscreen（Ionic v3+）

如果没有此插件，iOS仍会短暂显示启动画面，但Android则不会。

- Ilya Vinogradov

注意，如果您有大量的插件，请尝试使用 ionic plugins | grep splash（Ionic v1-v2）或 ionic cordova plugins | grep splash（Ionic v3+）来查找插件是否已安装。如果是，则会看到类似以下输出：cordova-plugin-splashscreen 4.0.3 "Splashscreen"。 - Ilya Vinogradov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sznrbrt · Accepted Answer

首先尝试重新安装插件：

$ ionic plugin remove cordova-plugin-splashscreen
$ ionic plugin add cordova-plugin-splashscreen

然后在您的资源文件夹中编辑splash图像。
在CLI中运行$ ionic resources --splash
重新构建$ ionic build android并运行您的应用程序

查看Ionic文档 - 图标和启动屏幕图像生成

如果这不起作用，您应该删除并重新添加您遇到问题的平台。

$ cordova platform remove android (or ios)
$ cordova platform add android (or ios)