React Native StatusBar 是用于装饰应用程序状态栏的组件。通过从React-Native库导入StatusBar组件来使用它。我们可以同时使用多个StatusBar。
<View> <StatusBar backgroundColor = "#b3e6ff" barStyle = "dark-content" /> </View>
<View> <StatusBar backgroundColor = "#b3e6ff" barStyle = "dark-content" /> <View> <StatusBar hidden={route.statusBarHidden} /> </View> </View>
Props | Description |
---|---|
animated | 如果状态栏的属性已更改,则该状态栏将显示为动画。它支持backgrondColor,hidden和barStyle。 |
barStyle | 它设置状态栏文本的颜色。 |
hidden | 它用于隐藏和显示状态栏。默认情况下,它为false。如果hidden = {false},则可见;如果hidden = {true},则隐藏状态栏。 |
backgroundColor | 它设置状态栏的背景色。 |
translucent | 设置为true时,该应用程序将在状态栏下构建。 |
showHideTransition | 当显示和隐藏状态栏时,它将显示过渡效果。默认为“fade”。 |
networkActivityIndicatorVisible | 它检查网络活动指示器是否可见。它在iOS中支持。 |
setHidden | setBarStyle | setBackgroundColor |
setNetworkActivityIndicatorVisible | setTranslucent |
让我们创建一个简单的状态栏示例,在其中我们更改其背景颜色。
App.js
import React, { Component } from 'react' import { View,StyleSheet,AppRegistry,StatusBar } from 'react-native' export default class ActivityIndicatorDemo extends Component { render() { return ( <View style = {styles.container}> <StatusBar backgroundColor = "#b3e6ff" barStyle = "dark-content" hidden = {false} translucent = {true} /> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, } }) AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)
输出:
在此示例中,我们使用其属性hidden = true隐藏了StatusBar。隐藏状态栏可使显示为全屏显示。
import React, { Component } from 'react' import { View,StyleSheet,AppRegistry,StatusBar } from 'react-native' export default class ActivityIndicatorDemo extends Component { render() { return ( <View> <StatusBar backgroundColor="#b3e6ff" barStyle="light-content" /> <View> <StatusBar hidden={true} /> </View> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, } }) AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)