React Native - 状态栏


在本章中,我们将向您展示如何在 React Native 中控制状态栏的外观。

状态栏易于使用,您只需设置属性即可更改它。

hide属性可用于隐藏状态栏。在我们的示例中,它设置为false。这是默认值。

barStyle可以具有三个值 – dark -content、light-contentdefault

该组件还有其他几个可以使用的属性。其中一些是 Android 或 IOS 特定的。您可以在官方文档中查看。

应用程序.js

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
   )
}
export default App

如果我们运行该应用程序,状态栏将可见,并且内容将呈深色。

输出

React Native 状态栏