帮助改进此文档

StatusBar

本文档贡献者：sunnylqm(100.00%)

控制应用状态栏的组件。

和导航器一起使用的注意事项

由于StatusBar可以在任意视图中加载，可以放置多个且后加载的会覆盖先加载的。因此在配合导航器使用时，请务必考虑清楚StatusBar的放置顺序。

import React, { useState } from "react";
import { Button, Text, StyleSheet, StatusBar, View } from "react-native";

import Constants from "expo-constants";

const App = () => {
  const styleTypes = ['default','dark-content', 'light-content'];
  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
  const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);

  const changeVisibilityStatusBar = () => {
    setVisibleStatusBar(!visibleStatusBar);
  };

  const changeStyleStatusBar = () => {
    const styleId = styleTypes.indexOf(styleStatusBar) + 1;

    if(styleId === styleTypes.length){
      return setStyleStatusBar(styleTypes[0]);
    }
    return setStyleStatusBar(styleTypes[styleId]);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
        <Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible': 'Hidden'}</Text>
      </View>
      <StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
      <View>
        <StatusBar hidden={visibleStatusBar} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ECF0F1',
    padding: 8
  },
  buttonContainer:{
    padding: 10
  },
  textStyle:{
    textAlign: 'center'
  }
});

export default App;

静态 API

有些场景并不适合使用组件，因此StatusBar也暴露了一个静态 API。然而不推荐大家同时通过静态 API 和组件来定义相同的属性，因为静态 API 定义的属性值在后续的渲染中会被组件中定义的值所覆盖。

---

文档

常量

currentHeight (仅限 Android)状态栏的当前高度。

Props

animated

指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle 和 hidden。

类型	必填
bool	否

---

backgroundColor

状态栏的背景色。

类型	必填	平台
color	否	Android

---

barStyle

设置状态栏文本的颜色。

On Android, this will only have an impact on API versions 23 and above.

类型	必填
enum('default', 'light-content', 'dark-content')	否

---

hidden

是否隐藏状态栏。

类型	必填
bool	否

---

networkActivityIndicatorVisible

指定是否显示网络活动提示符。

类型	必填	平台
bool	否	iOS

---

showHideTransition

通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'。

类型	必填	平台
enum('fade', 'slide')	否	iOS

---

translucent

指定状态栏是否透明。设置为 true 时，应用会延伸到状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。

类型	必填	平台
bool	否	Android

---

方法

popStackEntry()

static popStackEntry(entry: any)

Get and remove the last StatusBar entry from the stack.

参数：

Name	Type	Required	Description
entry	any	Yes	Entry returned from pushStackEntry.

---

pushStackEntry()

static pushStackEntry(props: any)

Push a StatusBar entry onto the stack. The return value should be passed to popStackEntry when complete.

参数：

Name	Type	Required	Description
props	any	Yes	Object containing the StatusBar props to use in the stack entry.

---

replaceStackEntry()

static replaceStackEntry(entry: any, props: any)

Replace an existing StatusBar stack entry with new props.

参数：

Name	Type	Required	Description
entry	any	Yes	Entry returned from pushStackEntry to replace.
props	any	Yes	Object containing the StatusBar props to use in the replacement stack entry.

---

setBackgroundColor()

static setBackgroundColor(color: string, [animated]: boolean)

设置状态栏的背景色。仅限 Android。

参数：

名称	类型	必填	说明
color	string	是	背景色
animated	boolean	否	是否启用过渡动画

---

setBarStyle()

static setBarStyle(style: StatusBarStyle, [animated]: boolean)

设置状态栏的样式

参数：

名称	类型	必填	说明
style	StatusBarStyle	是	要设置的状态栏样式
animated	boolean	否	是否启用过渡动画

---

setHidden()

static setHidden(hidden: boolean, [animation]: StatusBarAnimation)

显示／隐藏状态栏

参数：

名称	类型	必填	说明
hidden	boolean	是	是否隐藏状态栏
animation	StatusBarAnimation	否	改变状态栏显示状态的动画过渡效果

---

setNetworkActivityIndicatorVisible()

static setNetworkActivityIndicatorVisible(visible: boolean)

显示／隐藏网络活动指示器。仅限 iOS。

参数：

名称	类型	必填	说明
visible	boolean	是	是否显示网络活动指示器

---

setTranslucent()

static setTranslucent(translucent: boolean)

指定状态栏是否透明。设置为 true 时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。仅限 Android。

参数：

名称	类型	必填	说明
translucent	boolean	是	Set as translucent.

类型定义

StatusBarAnimation

状态栏动画过渡效果

类型
$Enum

常量：

Value	说明
none	没有动画
fade	渐变效果
slide	滑动效果

---

StatusBarStyle

状态栏样式

类型
$Enum

常量：

Value	说明
default	默认的样式（IOS 为白底黑字、Android 为黑底白字）
light-content	黑底白字
dark-content	白底黑字（需要 Android API>=23）

---