ionic splash screen 之后出现的白屏解决办法

dounainaicsdn

于 2016-02-29 19:33:02 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/dounainaicsdn/article/details/50767667

前端开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Ionic项目中遇到的启动后短暂白屏现象的解决方案，包括安装Cordova Splash Screen插件以及在app.js中添加隐藏闪屏的代码，从而确保从启动画面平滑过渡到应用页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic项目中，在splashscreen消失后会出现零点几秒的白屏，再出现app页面，通过Google以及各种尝试，下面方法解决：

1. 安装Cordova splash screen插件

$ cd myapp
$ ionic plugin add org.apache.cordova.splashscreen

2. 修改ionic项目的config.xml 文件，

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

  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="SplashScreenDelay" value="10000"/>
  <preference name="FadeSplashScreen" value="false"/>

即不让闪屏自动隐藏，而在代码中手动隐藏splash screen

3. 在app.js中添加隐藏闪屏代码

 $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            cordova.plugins.Keyboard.disableScroll(true);

            //延迟splash screnn 隐藏时间,不然会有短暂的白屏出现
            setTimeout(function () {
                navigator.splashscreen.hide();
            }, 1000);
        }
        });