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;