发表新帖
发表新帖

Ionic ion-view header behind ios status bar

后端 未结
关注
10 2208
礼貌的吻别
礼貌的吻别 2021-01-04 09:15

How do I avoid ionic header from getting behind ios status bar like this?

I created the header with following code:
相关标签:
10条回答
  • 孤城傲影
    2021-01-04 09:52

    I have been stuck on the same problem for a long time and none of the above solutions worked for me. Finally, to get the status bar from overlapping on the app's view, I added the following preference to my config.xml file and viola:

      <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

    This ofcourse requires the plugin: cordova-plugin-statusbar "StatusBar".

    Hope this helps.

    0 讨论(0)
  • 长情又很酷
    2021-01-04 09:54

    Finally the problem is solved.

    in app.js

    $ionicPlatform.ready(function() {
  if (window.cordova && $cordovaKeyboard) {
    $cordovaKeyboard.hideAccessoryBar(true);
  }
  if (window.StatusBar) {
    StatusBar.styleDefault();
  }
}

    and, if that doesn't solve the problem yet. In index.html, cordova.js should be imported on the very last.

    <head>
    ...

    <script src="cordova.js"></script>
</head>

    This solve my problem.

    0 讨论(0)
  • 半阙折子戏
    2021-01-04 09:56

    Just a quick reminder, If this issue only happens in some of the subpages, you probably used nav.push() inside a modal(this is depreciated). To fix this issue, in your modal

    import { App, ViewController } from 'ionic-angular';

     constructor(
      public viewCtrl: ViewController
      public app: App
    ) {}

    replace push() with below

      //this.navCtrl.push(nextPage);
  this.viewCtrl.dismiss();
  this.appCtrl.getRootNav().push(nextPage);
    0 讨论(0)
  • [愿得一人]
    2021-01-04 10:03

    I found a better option to do this. In AppModule.ts make change to IonicModule.forRoot(MyApp, {statusbarPadding: true}), and from app.component.ts remove or comment statusBar.overlaysWebView(true); it will fix your problem for IOS.

    0 讨论(0)
 看不清?
提交回复
热议问题