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)

   参数说明

2. setBarStyle()

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

setBarStyle() 的函数原型如下


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


参数说明

枚举常量

1. StatusBarStyle

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

   值说明

2. StatusBarAnimation

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

值说明

范例

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

演示效果如下

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

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