cordova-plugin-statusbar
StatusBar
对象提供了一些自定义 iOS 和 Android 状态栏的功能。
安装
此安装方法需要 cordova 5.0+
cordova plugin add cordova-plugin-statusbar
也可以直接通过仓库 URL 安装(不稳定)
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
偏好设置
config.xml
-
StatusBarOverlaysWebView (布尔值,默认为 true)。设置状态栏是否在启动时覆盖 WebView。
<preference name="StatusBarOverlaysWebView" value="true" />
##### Android 特性
仅在 Android 5 或更高版本上受支持。早期版本将忽略此偏好设置。
-
StatusBarBackgroundColor (颜色十六进制字符串,没有默认值)。在启动时通过十六进制字符串 (#RRGGBB) 设置状态栏的背景颜色。如果未设置此值,则背景颜色将为透明。如果
StatusBarOverlaysWebView
设置为 true,则可以选择使用 8 位十六进制字符串 (#AARRGGBB) 来定义透明度。<preference name="StatusBarBackgroundColor" value="#000000" />
-
StatusBarStyle (状态栏样式,默认为 lightcontent)。设置状态栏样式(例如,文本颜色)。可用选项:
default
,lightcontent
。<preference name="StatusBarStyle" value="lightcontent" />
-
StatusBarDefaultScrollToTop (布尔值,默认为 false)。在 iOS 上,允许 Cordova WebView 使用默认的滚动到顶部行为。默认为 false,以便您可以侦听“statusTap”事件(如下所述)并自定义行为。
<preference name="StatusBarDefaultScrollToTop" value="false" />
Android 特性
Android 5+ 指南指定状态栏使用与您的主要应用颜色不同的颜色(与许多 iOS 应用的统一状态栏颜色不同),因此您可能希望在运行时通过 StatusBar.backgroundColorByHexString
或 StatusBar.backgroundColorByName
设置状态栏颜色。一种方法是
if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString("#333");
}
也可以使状态栏半透明。Android 使用十六进制 ARGB 值,其格式为 #AARRGGBB。第一个字母对 AA 表示 alpha 通道。您必须将十进制不透明度值转换为十六进制值。您可以在这里阅读更多相关信息。
例如,具有 20% 不透明度的黑色状态栏
if (cordova.platformId == 'android') {
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString('#33000000');
}
iOS 特性
从 iOS 11 开始,如果您希望状态栏覆盖 WebView,则必须在 viewport meta 标签中包含 viewport-fit=cover
。
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
启动时隐藏
在运行时,您可以使用下面的 StatusBar.hide 函数,但是如果您希望在 iOS 上应用启动时隐藏状态栏,则必须修改应用的 Info.plist 文件。
如果不存在,请添加/编辑这两个属性。将“Status bar is initially hidden”设置为“YES”,并将“View controller-based status bar appearance”设置为“NO”。如果您在没有 Xcode 的情况下手动编辑它,则键和值为
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
方法
此插件定义全局 StatusBar
对象。
尽管在全局范围内,但在 deviceready
事件之后才可用。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(StatusBar);
}
- StatusBar.overlaysWebView
- StatusBar.styleDefault
- StatusBar.styleLightContent
- StatusBar.backgroundColorByName
- StatusBar.backgroundColorByHexString
- StatusBar.hide
- StatusBar.show
属性
- StatusBar.isVisible
事件
- statusTap
StatusBar.overlaysWebView
设置状态栏是否覆盖 WebView。
StatusBar.overlaysWebView(true);
描述
设置为 true 可使状态栏覆盖在您的应用之上。请确保您相应地调整样式,以便应用的标题栏或内容不会被覆盖。设置为 false 可使状态栏保持实心且不覆盖您的应用。然后,您可以使用其他功能设置样式和背景颜色以适合。
支持的平台
- iOS
- Android 5+
快速示例
StatusBar.overlaysWebView(true);
StatusBar.overlaysWebView(false);
StatusBar.styleDefault
使用默认状态栏(深色文本,用于浅色背景)。
StatusBar.styleDefault();
支持的平台
- iOS
- Android 6+
StatusBar.styleLightContent
使用 lightContent 状态栏(浅色文本,用于深色背景)。
StatusBar.styleLightContent();
支持的平台
- iOS
- Android 6+
StatusBar.backgroundColorByName
在 iOS 上,当您将 StatusBar.overlaysWebView 设置为 false 时,您可以通过颜色名称设置状态栏的背景颜色。
StatusBar.backgroundColorByName("red");
支持的颜色名称为
black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown
支持的平台
- iOS
- Android
StatusBar.backgroundColorByHexString
通过十六进制字符串设置状态栏的背景颜色。
StatusBar.backgroundColorByHexString("#C0C0C0");
也支持 CSS 简写属性。
StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB
在 iOS 上,当您将 StatusBar.overlaysWebView 设置为 false 时,您可以通过十六进制字符串 (#RRGGBB) 设置状态栏的背景颜色。
在 Android 上,当 StatusBar.overlaysWebView 为 true 时,以及在 WP7&8 上,您还可以将值指定为 #AARRGGBB,其中 AA 是 alpha 值。
支持的平台
- iOS
- Android
StatusBar.hide
隐藏状态栏。
StatusBar.hide();
支持的平台
- iOS
- Android
StatusBar.show
显示状态栏。
StatusBar.show();
支持的平台
- iOS
- Android
StatusBar.isVisible
读取此属性以查看状态栏是否可见。
if (StatusBar.isVisible) {
// do something
}
支持的平台
- iOS
- Android
statusTap
侦听此事件以了解状态栏是否被点击。
window.addEventListener('statusTap', function() {
// scroll-up with document.body.scrollTop = 0; or do whatever you want
});
支持的平台
- iOS