在开发一个Hybrid或者Native应用时，很多人都遇到过iOS11导航栏高度问题，尤其是当应用导航栏背景靠近状态栏时，导致状态栏空出空白的问题，非常影响美观性。此时，有一个npm包cordova-plugin-disable-ios11-statusbar可以很好地解决这个问题。
1. 简介
cordova-plugin-disable-ios11-statusbar是一个cordova/ionic3 iOS平台的插件，可以解决iOS11版本开始，导航栏与状态栏的间隔问题。
2. 安装
运行以下命令即可安装该插件：
cordova plugin add cordova-plugin-disable-ios11-statusbar
3. 使用
三种不同的方式可以使用该插件：
3.1. 使用cordova命令
在html代码中添加以下代码：
-- -------------------- ---- -------
------- ---------------------- --------------------------
--------
---------------------------------------- ---------- -
-- ------------------- --- ------ -
--------------------------------
-- ------------
--------------------------------------------------------
-
-- -------
---------这个代码块必须放在device的ready事件里，并且只适用于iOS平台。
3.2. 使用Ionic3
在"app.component.ts"中的"platform.ready()"事件后加入以下代码即可：
import { StatusBar } from '@ionic-native/status-bar';
...
constructor(public platform: Platform, statusBar: StatusBar) {
...
statusBar.overlaysWebView(false);
statusBar.styleBlackTranslucent();
}3.3. 使用Cordova-CLI / ionic-cli
在安装了cordova-ios@>= 4.3.0版本的项目中，添加以下属性到config.xml文件：
<platform name="ios">
<preference name="StatusBarOverlaysWebView" value="false" />
</platform>在安装了cordova-ios@<= 4.2.0版本的项目中，添加以下代码到"deviceready"事件：
StatusBarOverlaysWebView(false);
4. 示例代码
这里是一些示例代码：
-- -------------------- ---- -------
-- ---------
---------------------------------------- ---------- -
-- ------------------- --- ------ -
--------------------------------
-
-- -------
-- ------
------ - --------- - ---- ---------------------------
------------------ --------- --------- ---------- ---------- -
---
---------------------------------
----------------------------------
-
-- -----------
--------- -----------
----------- ------------------------------- ------------- --
-----------5. 结论
该npm包很好地解决了Hybrid或者Native应用iOS11版本开始的导航栏与状态栏的间隔问题。这篇文章详细介绍了npm包cordova-plugin-disable-ios11-statusbar的安装、使用方法和示例代码，在实际开发中可以作为一个参考教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e6581e8991b448dbca4