在 Ionic 2 中隐藏状态栏

Posted 2023-05-06

【中文标题】在 Ionic 2 中隐藏状态栏

【英文标题】：Hide StatusBar in Ionic 2

【发布时间】：2017-01-09 01:21:29

【问题描述】：

我已经使用 Ionic 2 构建了一个应用程序。当我在浏览器中运行它时，UI 看起来不错，但是一旦我在 ios 模拟器中运行，一切看起来都很笨重。问题在于状态栏。我需要隐藏状态栏。我尝试使用 ionic-native 的 StatusBar，就像这样-

    import StatusBar from 'ionic-native';
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();
      //StatusBar.styleDefault();
    );

但实际上它并没有隐藏状态栏，而是它只是用我的页眉颜色覆盖状态栏颜色。隐藏状态栏的任何解决方案。

【参考方案1】：

我正在研究 ionic3，希望它也适用于 ionic 2。 我也需要同样的，这是我的本地设置-

li packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

现在对以下文件进行更改-

config.xml

<preference name="Fullscreen" value="true" />

组件.ts

StatusBar.overlaysWebView(true);

这对我有用。

注意：- 更改将仅反映在模拟器或 Android 手机中，而不反映在 浏览器。