reactjs - visual - Ocultar la barra de estado con React Native

vscode auto close tags jsx

Question

¿Cómo se oculta la barra de estado para iOS o Android cuando se desarrolla con React Native? He importado StatusBar, pero creo que también hay StatusBarIOS y StatusBar para Android.

Answer 1

Descubrió cómo ocultar la barra de estado. En primer lugar, StatusBarIOS está en deprecated por lo que debe importar StatusBar y luego simplemente incluir este fragmento de código en la parte superior de su procesamiento:

<StatusBar hidden={true} />

Reaccionar documentos nativos en StatusBar

Answer 2

Prefiero la forma simple de importar el componente StatusBar y pasar True a Prop Oculto ...

Tan simplemente:

import React from "react";
import { StatusBar, View, Text } from "react-native";
class App extends React.Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<Text>Hello React Native!</Text>
</View>
)
}
}

Answer 3

Puede invocar este método desde cualquier lugar en su componente:

import React, { Component } from ''react'';
import { StatusBar } from ''react-native'';
class MyComponent extends Component {
componentDidMount() {
StatusBar.setHidden(true);
}
}

EDITAR:

Esto ocultará la barra de estado para toda la aplicación y no solo en tu componente específico, para resolver esto puedes hacer:

componentWillUnmount() {
StatusBar.setHidden(false);
}

O llamando a este método con falso desde otro lugar.

Answer 4

Si el motivo para ocultarlo es evitar que sus componentes se superpongan, tal vez prefiera usar SafeAreaView de la siguiente manera:

<SafeAreaView style={{flex: 1, backgroundColor: ''#fff''}}>
<View style={{flex: 1}}>
<Text>Hello World!</Text>
</View>
</SafeAreaView>

Debe ser el componente principal de una pantalla y, opcionalmente, puede utilizar un backgroundColor para que coincida con el color de la pantalla. Asegúrese de establecer un atributo de flex . Sus componentes ahora ocuparán cualquier área que no esté siendo utilizada por la barra de estado. Esto es especialmente útil para evitar el problema de ''muesca'' con algunos de los teléfonos más nuevos.

SafeAreaView es un componente de react-native, por lo que deberá asegurarse de agregarlo a sus importaciones:

import { SafeAreaView, Text, View } from ''react-native'';

Answer 5

De la versión 0. ?? al actual (0.55 / junio 2018)

<StatusBar hidden />

Crédito al primer comentario en esta respuesta

Recuerde importar primero el componente StatusBar según las otras respuestas aquí