如何在 Ionic 3 / Cordova 中创建没有状态栏的全屏应用程序答案

【问题标题】：How to Create Full Screen Application without Status bar in Ionic 3 / Crodova如何在 Ionic 3 / Cordova 中创建没有状态栏的全屏应用程序
【发布时间】：2018-05-03 03:31:14
【问题描述】：

我正在尝试在 Ionic3/Cordova/Angular 中创建一个全屏应用程序。

我进行了很多搜索，但找不到有效的解决方案。我试过https://github.com/apache/cordova-plugin-statusbar 但失败了（不确定这是否是一个糟糕的实现）

我希望应用程序从开始到应用程序中的每个页面都处于全屏模式，而在 iOS 和 Android 中都没有状态栏。

使用status.hide() 使其全屏显示，但不是在启动期间 - 启动画面。

  constructor(public navCtrl: NavController, public status: StatusBar) {
    status.hide();
  }

非常感谢任何帮助！

谢谢

【问题讨论】：

标签： angular cordova typescript ionic-framework ionic3

【解决方案1】：

您需要在this.platform.ready() 事件中调用它，如下所示。也许您也可以考虑ionViewDidEnter() 生命周期事件而不是constructor()。

  constructor(private platform: Platform, private status: StatusBar) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
       this.status.hide();
    });
  }

【讨论】：

我在问题中使用并作为示例给出的实现实际上是有效的，我的问题是从一开始就全屏显示。意思是从你打开应用的那一刻起（离子闪屏开始的那一刻）
希望你能在app.component.ts文件上提供以上信息吗？ @Melchia 在他的回答中也提到了这一点。

【解决方案2】：

使用 Ionic Native 状态栏：

npm install @ionic-native/core --save
ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

将插件添加到您的应用模块

    ` ...

        import { StatusBar} from '@ionic-native/status-bar';

    ...

@NgModule({
  ...

  providers: [
    ...
    StatusBar
    ...
  ]
  ...
})
export class AppModule { }

`

然后在你的 rootPage 或 app.component.ts 中使用它：

    import { StatusBar } from '@ionic-native/status-bar';

   constructor(platform: Platform) {
      platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.hide();

    });
  }

欲了解更多信息：https://ionicframework.com/docs/native/status-bar/

【讨论】：

在这里使用它，当设备准备好时..意味着我们已经通过了 Ionic 初始屏幕（在 ionic 初始化之后）

【解决方案3】：

将此添加到 index.html。

它适用于我的 iOS，但它不会隐藏状态栏的文本。

<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

【讨论】：

【解决方案4】：

在标题中添加一个类

<ion-header class="absent-header">

并使用对应的scss文件将其隐藏。

page-home {
   .absent-header {
        display: none;
   }
}

【讨论】：