React Native - Barra di stato

In questo capitolo, ti mostreremo come controllare l'aspetto della barra di stato in React Native.

La barra di stato è facile da usare e tutto ciò che devi fare è impostare le proprietà per modificarla.

Il hiddenpuò essere utilizzata per nascondere la barra di stato. Nel nostro esempio è impostato sufalse. Questo è il valore predefinito.

Il barStyle può avere tre valori: dark-content, light-content e default.

Questo componente ha molte altre proprietà che possono essere utilizzate. Alcuni di loro sono specifici per Android o IOS. Puoi verificarlo nella documentazione ufficiale.

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

Se eseguiamo l'app, la barra di stato sarà visibile e il contenuto avrà un colore scuro.

Produzione