Ionic ion-view header behind ios status bar

后端 未结 10 2210
礼貌的吻别
礼貌的吻别 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)
提交回复
热议问题