React Native - StatusBar

React Native - StatusBar 首页 / React Native入门教程 / React Native - StatusBar

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>

StatusBar属性

PropsDescription
animated如果状态栏的属性已更改,则该状态栏将显示为动画。它支持backgrondColor,hidden和barStyle。
barStyle它设置状态栏文本的颜色。
hidden它用于隐藏和显示状态栏。默认情况下,它为false。如果hidden = {false},则可见;如果hidden = {true},则隐藏状态栏。
backgroundColor它设置状态栏的背景色。
translucent设置为true时,该应用程序将在状态栏下构建。
showHideTransition当显示和隐藏状态栏时,它将显示过渡效果。默认为“fade”。
networkActivityIndicatorVisible它检查网络活动指示器是否可见。它在iOS中支持。

StatusBar方法

setHiddensetBarStylesetBackgroundColor
setNetworkActivityIndicatorVisiblesetTranslucent

StatusBar示例1

让我们创建一个简单的状态栏示例,在其中我们更改其背景颜色。

无涯教程网

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)

输出:

React Native StatusBar

StatusBar示例2

在此示例中,我们使用其属性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)

输出:

React Native StatusBar

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

React实战进阶45讲 -〔王沛〕

代码精进之路 -〔范学雷〕

玩转Spring全家桶 -〔丁雪丰〕

从0开始做增长 -〔刘津〕

分布式协议与算法实战 -〔韩健〕

分布式系统案例课 -〔杨波〕

现代React Web开发实战 -〔宋一玮〕

现代C++20实战高手课 -〔卢誉声〕

AI大模型系统实战 -〔Tyler〕

好记忆不如烂笔头。留下您的足迹吧 :)