React Native 状态栏组件 StatusBar

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

暗色系

React Native  状态栏  StatusBar

亮色系

React Native  状态栏  StatusBar

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

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

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 还提供了一些静态方法用来设置状态栏。

  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

运行效果如下

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

演示效果如下


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

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

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.