Expo StatusBar

一个库，提供与 React Native StatusBar API 相同的界面，但默认值略有不同，可以在 Expo 环境中很好地工作。

Android

iOS

tvOS

Web

Included in Expo Go

Recommended version:

~57.0.0

expo-status-bar 为你提供了一个组件和命令式接口，用于控制应用的状态栏，可以更改其文本颜色、隐藏它，并对这些更改中的任何一个应用动画。你能够使用 StatusBar 组件执行的具体操作取决于你使用的平台。

tvOS 和网页支持

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

对于网页，没有可用的 API 来控制操作系统的状态栏，因此 expo-status-bar 什么也不会做，也不会抛出错误。

安装

🌐 Installation

Terminal

- npx expo install expo-status-bar

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

应用配置中的配置

🌐 Configuration in app config

如果你的项目中使用配置插件（连续原生生成 (CNG)），你可以使用 expo-status-bar 的内置 config 插件来配置它。该插件允许你配置在运行时无法设置、且需要构建新的应用二进制文件才能生效的各种属性。如果你的应用不使用 CNG，那么你需要手动配置该库。

🌐 You can configure expo-status-bar using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.

Example app.json with config plugin

app.json

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

Configurable properties

Name	Default	Description
`hidden`	`undefined`	Determines whether the status bar starts hidden. Accepts `true` and `false` as values.
`style`	`undefined`	Determines which style the status bar starts with. Accepts `light` and `dark` as values.

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

如果你没有使用连续本地生成（CNG）或者你正在手动使用本地项目，那么你需要将以下配置添加到你的本地项目中：

🌐 If you're not using Continuous Native Generation (CNG) or you're using a native project manually, then you need to add the following configuration to your native project:

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

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

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

用法

🌐 Usage

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`

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`

Optional • Type: boolean

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

`hidden`

Optional • Type: boolean

If the status bar is hidden.

`hideTransitionAnimation`

Only for:

iOS

Optional • Type: StatusBarAnimation • Default: 'fade'

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

`style`

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)`

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)`

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)`

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)`

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`

Literal Type: string

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

`StatusBarStyle`

Literal Type: string

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