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

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.

à 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

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>
       )
    }
}

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';