React Native StatusBar

17 Mar 2025 | 阅读 2 分钟

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>

React Native StatusBar 属性

Props	描述
animated (动画)	如果状态栏的属性发生更改，则状态栏会进行动画处理。它支持 backgrondColor、hidden 和 barStyle。
barStyle (栏样式)	它设置状态栏文本的颜色。
hidden (隐藏)	它用于隐藏和显示状态栏。默认情况下，它为 false。如果 hidden = {false} 它可见，如果 hidden = {true}，它将隐藏状态栏。
backgroundColor	它设置状态栏的背景颜色。
translucent (半透明)	当设置为 true 时，应用程序构建在状态栏下方。
showHideTransition (显示/隐藏过渡)	它在显示和隐藏状态栏时显示过渡效果。默认值为 'fade'（淡入淡出）。
networkActivityIndicatorVisible (网络活动指示器可见)	它检查网络活动指示器是否可见。它在 iOS 中受支持。

React Native StatusBar 方法

setHidden (设置隐藏)	setBarStyle (设置栏样式)	setBackgroundColor (设置背景颜色)
setNetworkActivityIndicatorVisible (设置网络活动指示器可见)	setTranslucent (设置半透明)

React Native StatusBar 示例 1

让我们创建一个简单的 StatusBar 示例，其中我们更改其背景颜色。

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 示例 2（隐藏状态栏，全屏）

在此示例中，我们使用其属性 hidden = true 隐藏 StatusBar。隐藏 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 Switch

React Native StatusBar

React Native StatusBar 属性

React Native StatusBar 方法

React Native StatusBar 示例 1

React Native StatusBar 示例 2（隐藏状态栏，全屏）

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native StatusBar

React Native StatusBar 属性

React Native StatusBar 方法

React Native StatusBar 示例 1

React Native StatusBar 示例 2（隐藏状态栏，全屏）

相关帖子

React Native Props

ActivityIndicator

React Native WebView

环境设置

React Native ListView

React Native SectionList

React Native Switch

高度和宽度

第一个 App Hello World

React Native Style

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器