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>
版权声明:本文章禁止商业使用,非商用转载必须注明出处和作者。作者保留一切权利。

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

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

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

一、隐藏状态栏 1.安装插件: cordova plugin add cordova-plugin-fullscreen 2.修改config.xml文件 "android"> ... "...
  • robert_cysy
  • robert_cysy
  • 2017年03月16日 14:10
  • 4597

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

ionic项目会默认添加 cordova-plugin-statusbar 插件,可以控制状态栏 cordova官网链接如下: https://github.com/apache/cordova-...
  • u010564430
  • u010564430
  • 2017年07月11日 17:26
  • 1679

Hide StatusBar and fullscreen with Ionic 2 and Cordova

In some cases, we want to hide the status bar while developing our app. Here we will show you how ca...
  • voyager3
  • voyager3
  • 2016年06月01日 21:01
  • 3366

IoniC3+cordova 实现全屏

1.根据官网提示,安装全名插件 $ ionic cordova plugin add cordova-plugin-fullscreen $ npm install --save @ionic-...
  • FTD_2014
  • FTD_2014
  • 2017年11月20日 16:39
  • 328

ionic添加cordova插件-StatusBar

gzgchzc博客最新更新地址:http://blog.gzvtc.cc/ StatusBar 配置设备的状态栏颜色和样式。 cordova plugin add cordova-plugin-...
  • qq_33561700
  • qq_33561700
  • 2016年12月21日 16:06
  • 796

Ionic + material 备忘

ios 处理 status bar .platform-ios.platform-cordova:not(.fullscreen) .HeadBarPadding{ padding-top:...
  • wuna66320
  • wuna66320
  • 2015年10月08日 14:46
  • 1225

ionic 全屏显示页面 输入框被输入法遮盖

解决 ionic 全屏显示页面 输入框被输入法遮盖 ,避免在config.xml中配置下;
  • gufeilong
  • gufeilong
  • 2016年12月27日 13:58
  • 2350

ionic - 页面用力向右滑动返回了上一层

最近项目要发布ios版本,因为没有苹果手机没办法测试。一直在浏览器下开发,安卓测试;昨天测了苹果的,发现这个问题,在安卓上没问题,刚刚试了在浏览器下也会有这个问题。刚刚发现一个可行的方案:在app.j...
  • qq_25384945
  • qq_25384945
  • 2017年01月15日 16:20
  • 1584

转: ionic cordova 控制iOS状态栏的显示,隐藏,颜色

原文地址: http://blog.yetuwo.com/07/691.html ionic cordova 控制iOS状态栏的显示,隐藏,颜色 Cordova 插件地址: http...
  • apple_operation
  • apple_operation
  • 2016年07月30日 13:24
  • 2953
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Hide StatusBar and fullscreen with Ionic 2 and Cordova
举报原因:
原因补充:

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