跳到主要内容
版本:0.85

StatusBar

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

与 Navigator 一起使用

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

命令式 API

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


参考

常量

currentHeight
Android

状态栏的高度,包括刘海屏的高度(如果存在)。


属性

animated

如果状态栏属性变化之间的过渡应当进行动画处理。支持 backgroundColorbarStylehidden 属性。

TypeRequiredDefault
booleanfalse

backgroundColor
Android

状态栏的背景颜色。

注意

由于 Android 15 引入的边到边强制执行,在 API 级别 35 中设置状态栏背景颜色已被弃用,设置后将不起作用。你可以在这里阅读更多关于我们的 edge-to-edge 推荐

TypeRequiredDefault
color默认系统 StatusBar 背景颜色,或者在未定义时为 'black'

barStyle

设置状态栏文本的颜色。

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

TypeRequiredDefault
StatusBarStyle'default'

hidden

状态栏是否隐藏。

TypeRequiredDefault
booleanfalse

networkActivityIndicatorVisible
iOS

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

TypeDefault
booleanfalse

showHideTransition
iOS

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

TypeDefault
StatusBarAnimation'fade'

translucent
Android

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

注意

由于 Android 15 引入的边到边强制执行,在 API 级别 35 中将状态栏设为半透明已被弃用,设置后将不起作用。你可以在这里阅读更多关于我们的 edge-to-edge 推荐

TypeDefault
booleanfalse

方法

popStackEntry()

React TSX
static popStackEntry(entry: StatusBarProps);

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

参数:

NameTypeDescription
entry
Required
any来自 pushStackEntry 返回的条目。

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 引入的边到边强制执行,在 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 引入的边到边强制执行,在 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)