Expo StatusBar

一个库，提供与 React Native StatusBar API 相同的接口，但默认值略有不同，能够很好地适配 Expo 环境。

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.0

expo-status-bar 提供了一个组件和命令式接口，用于控制应用状态栏的文本颜色、隐藏状态栏，以及为这些更改应用动画。具体来说，StatusBar 组件支持哪些功能取决于你使用的平台。

tvOS 和 web 支持

对于 tvOS，expo-status-bar 代码可以编译并运行，但不会显示状态栏。

对于 web，没有可用于控制操作系统状态栏的 API，因此 expo-status-bar 不会执行任何操作，也不会抛出错误。

安装

Terminal

- npx expo install expo-status-bar

- yarn expo install expo-status-bar

- pnpm expo install expo-status-bar

- bun expo install expo-status-bar

If you are installing this in an existing React Native app, make sure to install expo in your project.

在应用配置中配置

如果你的项目使用 config plugins（Continuous Native Generation（CNG）），则可以使用内置的 config plugin 配置 expo-status-bar。该插件允许你配置各种无法在运行时设置、且需要重新构建应用二进制文件才能生效的属性。如果你的应用不使用 CNG，则需要手动配置此库。

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-status-bar",
        {
          "hidden": false,
          "style": "dark"
        }
      ]
    ]
  }
}

Configurable properties

Name	Default	Description
`hidden`	`undefined`	决定状态栏是否在启动时隐藏。接受 `true` 和 `false` 作为值。
`style`	`undefined`	决定状态栏启动时使用的样式。接受 `light` 和 `dark` 作为值。

Are you using this library in an existing React Native app?

如果你不使用 Continuous Native Generation（CNG），或者你手动使用原生项目，则需要向原生项目添加以下配置：

若要在 Android 上隐藏状态栏，请将 expoStatusBarHidden 添加到 android/app/src/main/res/values/styles.xml：

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
  <!-- ... -->
  <item name="expoStatusBarHidden">true</item>
</style>

若要在 iOS 上隐藏状态栏，请在 ios/<project>/Info.plist 中设置以下键：
```
<key>UIStatusBarHidden</key>
<true/>
```

用法

Example

import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Notice that the status bar has light text!</Text>
      <StatusBar style="light" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});

API

import { StatusBar } from 'expo-status-bar';

Component

`StatusBar`

Android

iOS

tvOS

Web

Type: React.Element<StatusBarProps>

A component that allows you to configure your status bar declaratively.

You will likely have multiple StatusBar components mounted in the same app at the same time. For example, if you have multiple screens in your app, you may end up using one per screen. The props of each StatusBar component will be merged in the order that they were mounted. This component is built on top of the StatusBar component exported from React Native, and it provides defaults that work better for Expo users.

StatusBarProps

`animated`

Android

iOS

tvOS

Web

Optional • Type: boolean

If the transition between status bar property changes should be animated. Supported for style and hidden.

`hidden`

Android

iOS

tvOS

Web

Optional • Type: boolean

If the status bar is hidden.

`hideTransitionAnimation`

iOS

Optional • Type: StatusBarAnimation • Default: 'fade'

The transition effect when showing and hiding the status bar using the hidden prop.

`style`

Android

iOS

tvOS

Web

Optional • Type: StatusBarStyle • Default: 'auto'

Sets the color of the status bar text. Default value is "auto" which picks the appropriate value according to the active color scheme, eg: if your app is dark mode, the style will be "light".

Component methods

`setHidden(hidden, animation)`

Android

iOS

tvOS

Web

Parameter	Type	Description
hidden	`boolean`	If the status bar should be hidden.
animation(optional)	`StatusBarAnimation`	Animation to use when toggling hidden, defaults to `'none'`.

Toggle visibility of the status bar.

Returns:

void

Example

StatusBar.setHidden(true, 'slide');

`setStyle(style, animated)`

Android

iOS

tvOS

Web

Parameter	Type	Description
style	`StatusBarStyle`	The color of the status bar text.
animated(optional)	`boolean`	If the transition should be animated.

Set the bar style of the status bar.

Returns:

void

Example

StatusBar.setStyle('dark', true);

Methods

Deprecated: Use StatusBar.setHidden instead. This will be removed in a future release.

`StatusBar.setStatusBarHidden(hidden, animation)`

Android

iOS

tvOS

Web

Parameter	Type	Description
hidden	`boolean`	If the status bar should be hidden.
animation(optional)	`StatusBarAnimation`	Animation to use when toggling hidden, defaults to `'none'`.

Returns:

void

Deprecated: Use StatusBar.setStyle instead. This will be removed in a future release.

`StatusBar.setStatusBarStyle(style, animated)`

Android

iOS

tvOS

Web

Parameter	Type	Description
style	`StatusBarStyle`	The color of the status bar text.
animated(optional)	`boolean`	If the transition should be animated.

Returns:

void

Types

`StatusBarAnimation`

Android

iOS

tvOS

Web

Literal type: string

Acceptable values are: 'none' | 'fade' | 'slide'

`StatusBarStyle`

Android

iOS

tvOS

Web

Literal type: string

Acceptable values are: 'auto' | 'inverted' | 'light' | 'dark'