跳到主要内容
版本:0.82

StatusBar

控制应用状态栏的组件。状态栏是屏幕顶部的区域,通常会显示当前时间、Wi‑Fi 和蜂窝网络信息、电池电量和/或其他状态图标。

与 Navigator 一起使用

可以同时挂载多个 StatusBar 组件。各个 StatusBar 组件的属性会按照挂载顺序进行合并。

命令式 API

在不适合使用组件的场景下,也提供了一个作为组件静态函数暴露的命令式 API。不过,不建议对同一个属性同时使用静态 API 和组件,因为通过静态 API 设置的任何值都会在下一次渲染时被组件设置的值覆盖。


参考

常量

currentHeight
Android

状态栏的高度,如果存在刘海屏,则包含刘海高度。


属性

animated

状态栏属性变更之间的过渡是否应带有动画。支持 backgroundColorbarStylehidden 属性。

类型必填默认值
booleanfalse

backgroundColor
Android

状态栏的背景颜色。

注意

由于 Android 15 引入的边到边强制要求,在 API 级别 35 中设置状态栏背景颜色已被弃用,设置后将不会生效。你可以在这里阅读更多关于我们的边到边建议。

类型必填默认值
color默认系统 StatusBar 背景颜色,或者在未定义时为 'black'

barStyle

设置状态栏文本的颜色。

在 Android 上,这仅会对 API 版本 23 及以上产生影响。

类型必填默认值
StatusBarStyle'default'

hidden

状态栏是否隐藏。

类型必填默认值
booleanfalse

networkActivityIndicatorVisible
iOS

网络活动指示器是否应可见。

类型默认值
booleanfalse

showHideTransition
iOS

使用 hidden 属性显示和隐藏状态栏时的过渡效果。

类型默认值
StatusBarAnimation'fade'

translucent
Android

状态栏是否为半透明。将 translucent 设为 true 时,应用将绘制在状态栏下方。这在使用半透明状态栏颜色时很有用。

注意

由于 Android 15 引入的边到边强制要求,在 API 级别 35 中将状态栏设为半透明已被弃用,设置后将不会生效。你可以在这里阅读更多关于我们的边到边建议。

类型默认值
booleanfalse

方法

popStackEntry()

React TSX
static popStackEntry(entry: StatusBarProps);

获取并移除堆栈中的最后一个 StatusBar 条目。

参数:

名称类型描述
entry
Required
anypushStackEntry 返回的条目。

pushStackEntry()

React TSX
static pushStackEntry(props: StatusBarProps): StatusBarProps;

将一个 StatusBar 条目压入堆栈。完成后应将返回值传递给 popStackEntry

参数:

名称类型描述
props
Required
any包含要在堆栈条目中使用的 StatusBar 属性的对象。

replaceStackEntry()

React TSX
static replaceStackEntry(
entry: StatusBarProps,
props: StatusBarProps
): StatusBarProps;

使用新属性替换现有的 StatusBar 堆栈条目。

参数:

名称类型描述
entry
Required
any要替换的、由 pushStackEntry 返回的条目。
props
Required
any包含要在替换后的堆栈条目中使用的 StatusBar 属性的对象。

setBackgroundColor()
Android

React TSX
static setBackgroundColor(color: ColorValue, animated?: boolean);

设置状态栏的背景颜色。

注意

由于 Android 15 引入的边到边强制要求,在 API 级别 35 中设置状态栏背景颜色已被弃用,设置后将不会生效。你可以在这里阅读更多关于我们的边到边建议。

参数:

名称类型描述
color
Required
string背景颜色。
animatedboolean使样式更改带有动画。

setBarStyle()

React TSX
static setBarStyle(style: StatusBarStyle, animated?: boolean);

设置状态栏样式。

参数:

名称类型描述
style
Required
StatusBarStyle要设置的状态栏样式。
animatedboolean使样式更改带有动画。

setHidden()

React TSX
static setHidden(hidden: boolean, animation?: StatusBarAnimation);

显示或隐藏状态栏。

参数:

名称类型描述
hidden
Required
boolean隐藏状态栏。
animation
iOS
StatusBarAnimation更改状态栏隐藏属性时的动画。

🗑️ setNetworkActivityIndicatorVisible()
iOS

Deprecated

状态栏网络活动指示器在 iOS 13 及更高版本中不受支持。该功能将在未来版本中移除。

React TSX
static setNetworkActivityIndicatorVisible(visible: boolean);

控制网络活动指示器的可见性。

参数:

名称类型描述
visible
Required
boolean显示指示器。

setTranslucent()
Android

React TSX
static setTranslucent(translucent: boolean);

控制状态栏的半透明性。

注意

由于 Android 15 引入的边到边强制要求,在 API 级别 35 中将状态栏设为半透明已被弃用,设置后将不会生效。你可以在这里阅读更多关于我们的边到边建议。

参数:

名称类型描述
translucent
Required
boolean设置为半透明。

类型定义

StatusBarAnimation

iOS 上用于过渡的状态栏动画类型。

类型
枚举

常量:

类型描述
'fade'string淡入淡出动画
'slide'string滑动动画
'none'string无动画

StatusBarStyle

状态栏样式类型。

类型
枚举

常量:

类型描述
'default'string默认状态栏样式(iOS 为深色,Android 为浅色)
'light-content'string白色文本和图标
'dark-content'string深色文本和图标(Android 上需要 API>=23)