@capacitor/status-bar
StatusBar API 提供了配置状态栏样式以及显示或隐藏状态栏的方法。
安装
npm install @capacitor/status-bar@latest-5
npx cap sync
iOS 注意事项
该插件需要在 Info.plist 中将 "View controller-based status bar appearance"
(UIViewControllerBasedStatusBarAppearance)设置为 YES。请阅读
配置 iOS 获取帮助。
状态栏的可见性默认为可见,样式默认为 Style.Default。你可以通过在
Info.plist 中添加 UIStatusBarHidden 和/或 UIStatusBarStyle 来更改这些默认值。
setBackgroundColor 和 setOverlaysWebView 目前在 iOS 设备上不受支持。
示例
import { StatusBar, Style } from '@capacitor/status-bar';
// 仅限 iOS
window.addEventListener('statusTap', function () {
console.log('状态栏被点击');
});
// 在透明状态栏下显示内容(仅限 Android)
StatusBar.setOverlaysWebView({ overlay: true });
const setStatusBarStyleDark = async () => {
await StatusBar.setStyle({ style: Style.Dark });
};
const setStatusBarStyleLight = async () => {
await StatusBar.setStyle({ style: Style.Light });
};
const hideStatusBar = async () => {
await StatusBar.hide();
};
const showStatusBar = async () => {
await StatusBar.show();
};
API
setStyle(...)
setStyle(options: StyleOptions) => Promise<void>
设置状态栏的当前样式。
| 参数 | 类型 |
|---|---|
options | |
从版本: 1.0.0
setBackgroundColor(...)
setBackgroundColor(options: BackgroundColorOptions) => Promise<void>
设置状态栏的背景颜色。
此方法仅在 Android 上受支持。
| 参数 | 类型 |
|---|---|
options | |
从版本: 1.0.0
show(...)
show(options?: AnimationOptions | undefined) => Promise<void>
显示状态栏。
在 iOS 上,如果状态栏初始是隐藏的且初始样式设置为
UIStatusBarStyleLightContent,第一次调用 show 可能会在动画中出现文字显示为深色然后过渡到浅色的闪烁问题。建议
在第一次调用时使用 Animation.None 作为动画。
| 参数 | 类型 |
|---|---|
options | |
从版本: 1.0.0
hide(...)
hide(options?: AnimationOptions | undefined) => Promise<void>
隐藏状态栏。
| 参数 | 类型 |
|---|---|
options | |
从版本: 1.0.0
getInfo()
getInfo() => Promise<StatusBarInfo>
获取状态栏当前状态的信息。
返回:
Promise<StatusBarInfo>
从版本: 1.0.0
setOverlaysWebView(...)
setOverlaysWebView(options: SetOverlaysWebViewOptions) => Promise<void>
设置状态栏是否应覆盖 WebView,以允许使用其下方的空间。
此方法仅在 Android 上受支持。
| 参数 | 类型 |
|---|---|
options | |
从版本: 1.0.0
接口
StyleOptions
| 属性 | 类型 | 描述 | 从版本 |
|---|---|---|---|
style | | 状态栏文字的样式。 | 1.0.0 |
BackgroundColorOptions
| 属性 | 类型 | 描述 | 从版本 |
|---|---|---|---|
color | string | 设置状态栏颜色的十六进制颜色值。此选项仅在 Android 上受支持。 | 1.0.0 |
AnimationOptions
| 属性 | 类型 | 描述 | 默认值 | 从版本 |
|---|---|---|---|---|
animation | | 显示或隐藏时使用的状态栏动画类型。此选项仅在 iOS 上受支持。 | Animation.Fade | 1.0.0 |
StatusBarInfo
| 属性 | 类型 | 描述 | 从版本 |
|---|---|---|---|
visible | boolean | 状态栏是否可见。 | 1.0.0 |
style | | 当前状态栏样式。 | 1.0.0 |
color | string | 当前状态栏颜色。此选项仅在 Android 上受支持。 | 1.0.0 |
overlays | boolean | 状态栏是否覆盖。此选项仅在 Android 上受支持。 | 1.0.0 |
SetOverlaysWebViewOptions
| 属性 | 类型 | 描述 | 从版本 |
|---|---|---|---|
overlay | boolean | 是否覆盖状态栏。 | 1.0.0 |
枚举
Style
| 成员 |
|---|