跳到主要内容
版本:Next

状态栏

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

与 Navigator 一起使用

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

命令式 API

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


参考

常量

currentHeight
Android

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


属性

animated

如果状态栏属性更改之间的过渡应当带有动画。支持 backgroundColorbarStylehidden 属性。

TypeRequiredDefault
booleanNofalse

backgroundColor
Android

状态栏的背景颜色。

注意

由于 Android 15 引入了 edge-to-edge 强制执行,在 API 级别 35 中设置状态栏背景颜色已被弃用,并且设置后不会产生任何效果。你可以在这里阅读更多关于我们的 edge-to-edge 建议。

TypeRequiredDefault
colorNo默认系统 StatusBar 背景颜色;如果未定义,则为 'black'

barStyle

设置状态栏文字的颜色。

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

TypeRequiredDefault
StatusBarStyleNo'default'

hidden

状态栏是否隐藏。

TypeRequiredDefault
booleanNofalse

networkActivityIndicatorVisible
iOS

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

TypeDefault
booleanfalse

showHideTransition
iOS

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

TypeDefault
StatusBarAnimation'fade'

translucent
Android

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

注意

由于 Android 15 引入了 edge-to-edge 强制执行,在 API 级别 35 中将状态栏设为半透明已被弃用,并且设置后不会产生任何效果。你可以在这里阅读更多关于我们的 edge-to-edge 建议。

TypeDefault
booleanfalse

方法

popStackEntry()

React TSX
static popStackEntry(entry: StatusBarProps);

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

参数:

NameTypeDescription
entry
Required
anypushStackEntry 返回的条目。

pushStackEntry()

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

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

参数:

NameTypeDescription
props
Required
any包含要在栈条目中使用的 StatusBar 属性的对象。

replaceStackEntry()

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

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

参数:

NameTypeDescription
entry
Required
any要替换的、由 pushStackEntry 返回的条目。
props
Required
any包含要用于替换栈条目的 StatusBar 属性的对象。

setBackgroundColor()
Android

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

设置状态栏的背景颜色。

注意

由于 Android 15 引入了 edge-to-edge 强制执行,在 API 级别 35 中设置状态栏背景颜色已被弃用,并且设置后不会产生任何效果。你可以在这里阅读更多关于我们的 edge-to-edge 建议。

参数:

NameTypeDescription
color
Required
string背景颜色。
animatedboolean为样式更改添加动画。

setBarStyle()

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

设置状态栏样式。

参数:

NameTypeDescription
style
Required
StatusBarStyle要设置的状态栏样式。
animatedboolean为样式更改添加动画。

setHidden()

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

显示或隐藏状态栏。

参数:

NameTypeDescription
hidden
Required
boolean隐藏状态栏。
animation
iOS
StatusBarAnimation更改状态栏 hidden 属性时的动画。

🗑️ setNetworkActivityIndicatorVisible()
iOS

Deprecated

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

React TSX
static setNetworkActivityIndicatorVisible(visible: boolean);

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

参数:

NameTypeDescription
visible
Required
boolean显示指示器。

setTranslucent()
Android

React TSX
static setTranslucent(translucent: boolean);

控制状态栏的半透明效果。

注意

由于 Android 15 引入了 edge-to-edge 强制执行,在 API 级别 35 中将状态栏设为半透明已被弃用,并且设置后不会产生任何效果。你可以在这里阅读更多关于我们的 edge-to-edge 建议。

参数:

NameTypeDescription
translucent
Required
boolean设为半透明。

类型定义

StatusBarAnimation

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

类型
enum

常量:

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

StatusBarStyle

状态栏样式类型。

| 类型 | | ---- | ---- | | enum |

常量:

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