React Native 状态栏组件 StatusBar - React Native 基础教程

状态栏 StatusBar 就是手机屏幕最顶上一个区域，包含 运营商名称、网络情况、电池情况那一条。

暗色系

React Native 状态栏 StatusBar

亮色系

React Native 状态栏 StatusBar

在 React Native 中我们可以定制 状态栏 StatusBar 。当然了，说是定制，无非以下几点

显示或隐藏状态栏。
设置主题色：亮色系还是暗色系。
设置显示或隐藏时是否启用动画。

React Native 提供了 <StatusBar> 组件来做上面这些事情。

引入组件

import { StatusBar } from 'react-native'

使用语法

<StatusBar 
    barStyle    = "dark-content|light-content" 
    hidden      = {true|false}
    animated    = {true|false}
/>

注意

React Native 中的 StatusBar 采用覆盖规则，我们可以在一个页面中定义多个 <StatusBar> 。后面定义的 <StatusBar> 的属性会覆盖前一个 <StatusBar> 设置的属性。

<View>
  <StatusBar backgroundColor="blue" barStyle="light-content" />
  <View>
    <StatusBar hidden={route.statusBarHidden} />
    ...
  </View>
</View>

静态方法

除了可以使用属性来设置状态栏外，React Native 中的 StatusBar 还提供了一些静态方法用来设置状态栏。

setHidden()

setHidden() 用于设置显示或隐藏状态栏。

setHidden() 的函数原型如下
```
static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
```
参数说明

参数类型是否必填说明

hidden boolean 是是否隐藏状态栏，true 是，false 否

animation StatusBarAnimation 否可选，设置显示或隐藏状态改变时的动画。
setBarStyle()

setBarStyle() 用于设置状态栏的主题色。

setBarStyle() 的函数原型如下
```
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
```
参数说明

参数类型是否必填说明

style StatusBarStyle 是要设置的状态栏主题色

animated boolean 否主题色改变时是否动画

参数	类型	是否必填	说明
hidden	boolean	是	是否隐藏状态栏，`true` 是，`false` 否
animation	StatusBarAnimation	否	可选，设置显示或隐藏状态改变时的动画。

参数	类型	是否必填	说明
style	StatusBarStyle	是	要设置的状态栏主题色
animated	boolean	否	主题色改变时是否动画

枚举常量

StatusBarStyle

StatusBarStyle 枚举常量定义了状态栏可用的主题色.

值说明

值	说明
default	默认主题色，iOS 上是 `dark-content` ，Android 是 `light-content`
light-content	暗色的背景，亮色的文字和图标
dark-content	亮色的背景，暗色的文字和图标( Android 要求 API >= 23 )

StatusBarAnimation

StatusBarAnimation 枚举常量定义了状态栏可用的动画效果。

值说明

值说明

none 默认，没有动画效果

fade 渐隐渐现动画效果

slide 渐入渐出动画效果

值	说明
none	默认，没有动画效果
fade	渐隐渐现动画效果
slide	渐入渐出动画效果

范例

范例 1

下面的代码，我们设置状态栏 StatusBar 的主题色为 暗色系，同时显示状态栏。

App.js

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden={false} />
   )
}
export default App

运行效果如下

React Native 状态栏 StatusBar

范例2

下面的代码，我们使用脚本来控制状态栏的显示和隐藏，使用脚本来控制状态栏的主题色

App.js

import React, { Component } from 'react';
import {View, Text, StatusBar, StyleSheet, TouchableOpacity} from 'react-native'

class App extends Component {

   state = {
      hidden:false,
      barStyle:'default'
   }

    changeHidden = () =>{
      var hidden = this.state.hidden ? false : true;
        this.setState({ hidden: hidden })
    }

    changeBarStyle = () =>{
      var  barStyle = this.state.barStyle == 'light-content' ? 'dark-content' : 'light-content';
        this.setState({ barStyle: barStyle })
    }

    render() {
      return (
         <View>
            <StatusBar barStyle = {this.state.barStyle} hidden={this.state.hidden} />
            <TouchableOpacity style={styles.button} onPress = {this.changeHidden}>
               <Text>显示或隐藏</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.button} onPress = {this.changeBarStyle}>
               <Text>改变主题色</Text>
           </TouchableOpacity>
        </View>
      )
   }
}
export default App

const styles = StyleSheet.create ({
    button: {
        backgroundColor: '#4ba37b',
        width: 100,
        borderRadius: 50,
        alignItems: 'center',
        marginTop: 100
    }
})

演示效果如下

大家知道为什么隐藏的时候有一条黑色的条吗？

那是因为的实体机是全屏手机，顶部的中央有一个 摄像头。