React Native - 状态栏

  • 简述

    在本章中,我们将向您展示如何在 React Native 中控制状态栏的外观。
    状态栏易于使用,您只需设置属性即可更改它。
    hidden属性可用于隐藏状态栏。在我们的示例中,它设置为false. 这是默认值。
    barStyle可以有三个值——dark-content, light-contentdefault.
    该组件还有其他几个可以使用的属性。其中一些是特定于 Android 或 IOS 的。你可以在官方文档中查看。
  • app.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
    
    如果我们运行应用程序,状态栏将可见,内容将显示为深色。
  • 输出

    反应原生状态栏