Question

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

我搜索了很多但找不到合适的解决方案。我尝试了https://github.com/apache/cordova-plugin-statusbar但失败了（不确定这是不是很糟糕的实现）

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

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

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

非常感谢任何帮助！

谢谢

Answer 1

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

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

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

Answer 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/

Answer 3

将此添加到index.html。

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

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

Answer 4

在标题中添加一个类

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

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

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

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

4 个答案: