Hide StatusBar and fullscreen with Ionic 2 and Cordova

原创 2016年06月01日 21:01:02

Resume

In some cases, we want to hide the status bar while developing our app. Here we will show you how can we hide the status bar with Ionic 2.


Headers

To hide status bar, we need to import the following libraries.

import { Platfrom, App } from 'ionic-angular';
import { StatusBAr } from 'ionic-native';

Hide

We can add these codes to hide the status bar in our constructor.

constructor(private platform: Platform){
    this.platform.ready().then(() => {
        StatusBar.hide();
        document.addEventListener('resume',()=>{
            StatusBar.hide();
        });
    });
}

Because in some cases, when we switch to another app, and switch back to our app, the status back comes back. So I would suggest you to add an EventListener to hide StatusBar when resuming.

Until now, it seems that the native Ionic 2 resume listener (platform.pause.subscribe(()=>{ /* TODO */});) hasn’t been implemented. I would recommend you to use native Ionic 2 event listener


Cordova plugin

Before using fullscreen, you should launch this command in you Terminal to install Cordova’s fullscreen plugin

cordova plugin add cordova-plugin-fullscreen

Fullscreen in XML

After installing the Cordova plugin, insert <preference name="Fullscreen" value="true" /> to you config.xml in <platform></platform>

<platform name="android">
...
<preference name="Fullscreen" value="true" />
...
</platform>
版权声明:本文章禁止商业使用,非商用转载必须注明出处和作者。作者保留一切权利。

相关文章推荐

Ionic2 隐藏状态栏,全屏, 禁止旋转,保持横屏

一、隐藏状态栏 1.安装插件: cordova plugin add cordova-plugin-fullscreen 2.修改config.xml文件 "android"> ... "...

ionic 全屏显示,隐藏状态栏StatusBar

ionic项目会默认添加 cordova-plugin-statusbar 插件,可以控制状态栏 cordova官网链接如下: https://github.com/apache/cordova-...

ionic开发——利用localStorage存储用户名和密码

在开发中,只要用户登录过一次,再次打开应用程序,都会自动填充用户名和密码,那么怎么实现的,我们可以用localStorage来实现这个功能,代码如下:   一、了解localStorage ...

Ionic3 透明导航栏、渐变导航栏

在ionic中实现透明导航栏非常简单,主要用到三个属性:1、no-border2、transparent3、fullscreen先来看看效果图: 实现代码://加入no-border让heade...

Phonegap修改全屏/非全屏设置 Html5

Phonegap全屏/非全屏设置 cordova 3.4 修改屏幕配置 修改参数来设置WebView全屏  或者  非全屏 在工程的 res/xml目录下的config.xml 如下图:   在co...
  • aaawqqq
  • aaawqqq
  • 2014年03月28日 22:44
  • 6100

解决Cordova开发的iOS的app界面被状态栏覆盖

在使用cordova6.0的过程中,编译好的APP运行在IOS7+系统上默认是与状态栏重叠的,而运行在IOS6及老版本中时是于状态栏分离的。    解决办法如下:    把文件MainViewCo...
  • ABC__D
  • ABC__D
  • 2016年05月05日 15:00
  • 5487

ionic项目中手机状态栏显示使用$cordovaStatusbar插件

在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin ad...

ionic添加cordova插件-StatusBar

StatusBar 配置设备的状态栏颜色和样式。cordova plugin add cordova-plugin-statusbar在创建ionic应用时已经安装好这个插件可以在plugins目录...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Hide StatusBar and fullscreen with Ionic 2 and Cordova
举报原因:
原因补充:

(最多只允许输入30个字)