React Native - Barra de estado

En este capítulo, le mostraremos cómo controlar la apariencia de la barra de estado en React Native.

La barra de estado es fácil de usar y todo lo que necesita hacer es establecer propiedades para cambiarla.

los hiddenLa propiedad se puede utilizar para ocultar la barra de estado. En nuestro ejemplo, se establece enfalse. Este es el valor predeterminado.

los barStyle puede tener tres valores - dark-content, light-content y default.

Este componente tiene varias otras propiedades que se pueden utilizar. Algunos de ellos son específicos de Android o IOS. Puedes consultarlo en documentación oficial.

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

Si ejecutamos la aplicación, la barra de estado será visible y el contenido tendrá un color oscuro.

Salida