Native reagieren - Statusleiste

In diesem Kapitel zeigen wir Ihnen, wie Sie das Erscheinungsbild der Statusleiste in React Native steuern.

Die Statusleiste ist einfach zu bedienen und Sie müssen lediglich Eigenschaften festlegen, um sie zu ändern.

Das hiddenMit der Eigenschaft kann die Statusleiste ausgeblendet werden. In unserem Beispiel ist es auf gesetztfalse. Dies ist der Standardwert.

Das barStyle kann drei Werte haben - dark-content, light-content und default.

Diese Komponente verfügt über mehrere andere Eigenschaften, die verwendet werden können. Einige von ihnen sind Android- oder IOS-spezifisch. Sie können es in der offiziellen Dokumentation überprüfen.

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

Wenn wir die App ausführen, wird die Statusleiste angezeigt und der Inhalt hat eine dunkle Farbe.

Ausgabe