web-dev-qa-db-fra.com

Masquer la barre d'état avec React Native

Comment cachez-vous la barre d'état pour iOS ou Android lors du développement avec React Native? J'ai importé StatusBar, mais je pense qu'il existe également StatusBarIOS et un StatusBar pour Android.

reactjsreact-nativestatusbar
41
Rheisen

Compris comment cacher la barre d'état. Tout d’abord, StatusBarIOS est Obsolète vous devez donc importer StatusBar et ensuite simplement inclure cet extrait de code en haut de votre rendu:

<StatusBar hidden />

Réagissez aux documents natifs sur StatusBar

82
Rheisen

Vous pouvez appeler cette méthode à partir de n’importe où dans votre composant:

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

class MyComponent extends Component {

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

MODIFIER:

Cela masquera la barre d'état de l'application entière et pas seulement de votre composant spécifique. Pour résoudre ce problème, vous pouvez le faire:

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

Ou appeler cette méthode avec false depuis un autre endroit.

49
Nir Ben-Yair

Je préfère le moyen simple d'importer le StatusBar composant et de passer true à hidden prop ...

Alors 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>
       )
    }
}
4
Alireza

À partir de la version 0. ?? to current (0.55/June 2018)

<StatusBar hidden />

Crédit au premier commentaire dans cette réponse

Pensez à importer d'abord le composant StatusBar comme indiqué dans les autres réponses

3
Hastig Zusammenstellen

Pour caché:

StatusBar.setHidden(false, 'slide');

Pour le spectacle:

StatusBar.setHidden(true, 'none');
1
Mahdi Bashirpour

Si vous le cachez pour éviter que vos composants ne le chevauchent, vous préférerez peut-être simplement utiliser SafeAreaView comme suit:

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

Il doit s'agir du composant parent d'un écran et peut éventuellement utiliser une variable backgroundColor pour correspondre à la couleur de votre écran. Assurez-vous de définir un attribut flex. Vos composants vont maintenant occuper toute zone non utilisée par la barre d'état. Ceci est particulièrement utile pour contourner le problème de l'encoche avec certains des téléphones les plus récents.

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

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