Masquer la barre d'état à Réagir Natif

Comment cacher la barre d'État pour iOS ou Android lors du développement avec React Native? J'ai importé StatusBar, mais je crois qu'il y a aussi StatusBarIOS et un StatusBar pour Android.

31
demandé sur Rheisen 2016-03-23 21:49:11

5 réponses

Compris comment masquer la barre d'état. Tout d'abord, StatusBarIOS est dépréciée vous devez donc importer StatusBar et puis il suffit d'inclure ce petit bout de code en haut de votre rendu:

<StatusBar hidden />

Réagir Natif de Docs sur StatusBar

68
répondu Rheisen 2018-10-01 09:45:47

vous pouvez invoquer cette méthode depuis n'importe où dans votre component:

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

EDIT:

cela masquera la barre d'État pour l'application entière et pas seulement dans votre composant spécifique, pour résoudre cela vous pouvez faire:

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

ou appeler cette méthode avec false d'ailleurs.

43
répondu Nir Ben-Yair 2018-06-05 07:56:43

à Partir de la version 0.?? les courants (0.55 / juin 2018)

<StatusBar hidden />

le premier commentaire decette réponse

N'oubliez pas d'importer d'abord le Barre d'état du composant selon les autres réponses ici

3
répondu Hastig Zusammenstellen 2018-06-08 08:17:19

je préfère la manière la plus simple de l'importation de l' Barre d'état composant et en passant truecachée prop...

Donc Simplement:

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>
       )
    }
}
2
répondu Alireza 2018-04-17 13:18:28

si votre raison de le cacher est d'empêcher vos composants de le chevaucher, vous pourriez préférer utiliser SafeAreaView comme suit:

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

Il devrait être le composant parent d'un écran et peut éventuellement utiliser un backgroundColor pour correspondre à la couleur de votre écran. Assurez-vous de mettre un flex l'attribut. Vos composants vont maintenant prendre n'importe quelle zone non utilisée par la barre d'état. Cela est particulièrement utile pour contourner la question de "l'entaille" avec certains des plus récents téléphone.

SafeAreaView est un composant de react-native donc vous devez vous assurer que vous l'ajoutez à vos importations:

import { SafeAreaView, Text, View } from 'react-native';
0
répondu kojow7 2018-07-16 05:06:31