Expo 状态栏

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

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

更新日志

Bundled version:

~3.0.9

expo-status-bar 为你提供了一个组件和命令式接口，用于控制应用状态栏，以更改其文字颜色、背景颜色、隐藏状态栏、使其半透明或不透明，并将动画应用于这些更改中的任意一种。你能够对 StatusBar 组件执行的具体操作取决于你正在使用的平台。

tvOS 和 web 支持

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

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

安装

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.

用法

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}>请注意，状态栏的文字是浅色的！</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 without directly calling imperative methods like setBarStyle.

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 backgroundColor, barStyle and hidden.

`backgroundColor`

Android

Optional • Type: string

The background color of the status bar.

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

`networkActivityIndicatorVisible`

iOS

Optional • Type: boolean

If the network activity indicator should be visible.

`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".

`translucent`

Android

Optional • Type: boolean

If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is the default behaviour in projects created with Expo tools because it is consistent with iOS.

Methods

`StatusBar.setStatusBarBackgroundColor(backgroundColor, animated)`

Android

Parameter	Type	Description
backgroundColor	`ColorValue`	The background color of the status bar.
animated(optional)	`boolean`	`true` to animate the background color change, `false` to change immediately.

Set the background color of the status bar.

Returns:

void

`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'`.

Toggle visibility of the status bar.

Returns:

void

`StatusBar.setStatusBarNetworkActivityIndicatorVisible(visible)`

iOS

Parameter	Type	Description
visible	`boolean`	If the network activity indicator should be visible.

Toggle visibility of the network activity indicator.

Returns:

void

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

Set the bar style of the status bar.

Returns:

void

`StatusBar.setStatusBarTranslucent(translucent)`

Android

Parameter	Type	Description
translucent	`boolean`	Whether the app can draw under the status bar. When `true`, content will be rendered under the status bar. This is always `true` on iOS and cannot be changed.

Set the translucency of the status bar.

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'