StatusBar

参考文档

控制应用状态栏的组件。

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

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

静态 API

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

查看 Props

继承了所有View Props.

属性 类型 必填 描述
animated bool 指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式:backgroundColor, barStyle 和 hidden。
backgroundColor color 状态栏的背景色。(Android)
barStyle enum('default', 'light-content', 'dark-content') 设置状态栏文本的颜色。
hidden bool 是否隐藏状态栏。
networkActivityIndicatorVisible bool 指定是否显示网络活动提示符。(ios)
showHideTransition enum('fade', 'slide') 通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'。
translucent bool 指定状态栏是否透明。设置为 true 时,应用会延伸到状态栏之下绘制(即所谓“沉浸式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用。(Android)

方法

popStackEntry()

static popStackEntry(entry: any)

获取并从堆栈中删除最后一个StatusBar条目

参数:

名称 类型 必填 描述
entry any 从pushStackEntry返回的条目。

pushStackEntry()

static pushStackEntry(props: any)

将StatusBar条目压入堆栈。 完成后,应将返回值传递给popStackEntry。

名称 类型 必填 描述
props any 包含要在堆栈条目中使用的StatusBar道具的对象。

replaceStackEntry()

static replaceStackEntry(entry: any, props: any)

用新的道具替换现有的StatusBar堆栈条目。

名称 类型 必填 描述
entry any 从pushStackEntry返回的条目要替换。
props any 包含要在替换堆栈条目中使用的StatusBar道具的对象。

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 是否隐藏状态栏。
animated StatusBarAnimation 改变状态栏显示状态的动画过渡效果。

setNetworkActivityIndicatorVisible()

static setNetworkActivityIndicatorVisible(visible: boolean)

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

参数:

名称 类型 必填 描述
visible boolean 是否显示网络活动指示器。
animated StatusBarAnimation 改变状态栏显示状态的动画过渡效果。

setTranslucent()

static setTranslucent(translucent: boolean)

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

参数:

名称 类型 必填 描述
translucent boolean 设置透明度。

类型定义

StatusBarAnimation

状态栏动画过渡效果

类型 $Enum

常量:

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

StatusBarStyle

状态栏样式

类型 $Enum

常量:

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

Example

示例

import React, { Component } from "react";
import { StatusBar, Text, View } from "react-native";

class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
       <StatusBar
           backgroundColor="blue"
           barStyle="light-content"
         />
      </View>
    );
  }
}

export default App;
该文件修订时间: 2021-01-14 15:02:10

results matching ""

    No results matching ""