React Native 状态栏组件 StatusBar
状态栏 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 否 主题色改变时是否动画
枚举常量
-
StatusBarStyle
StatusBarStyle
枚举常量定义了状态栏可用的主题色.值说明
值 说明 default 默认主题色,iOS 上是 dark-content
,Android 是light-content
light-content 暗色的背景,亮色的文字和图标 dark-content 亮色的背景,暗色的文字和图标( Android 要求 API >= 23 ) -
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 } })
演示效果如下
大家知道为什么隐藏的时候有一条黑色的条吗?
那是因为的实体机是全屏手机,顶部的中央有一个 摄像头。