React Native 状态栏组件 StatusBar

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

暗色系

亮色系

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

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

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

引入组件

import { StatusBar } from 'react-native'

使用语法

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

注意

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

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

静态方法

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

1. setHidden()

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

   setHidden() 的函数原型如下

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

   参数说明

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

2. setBarStyle()

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

   setBarStyle() 的函数原型如下

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

   参数说明

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

枚举常量

1. StatusBarStyle

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

   值说明

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

2. StatusBarAnimation

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

   值说明

   值	说明
   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

运行效果如下

范例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
    }
})

演示效果如下

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

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