Ausblenden der Statusleiste mit Native React

How do you hide the status bar für iOS oder Android bei der Entwicklung mit React Native? Ich habe importiert StatusBar, aber ich glaube, es ist auch StatusBarIOS und eine StatusBar für Android.

InformationsquelleAutor der Frage Rheisen | 2016-03-23

  1. 67

    Herausgefunden, wie man das ausblenden der Statusleiste. Zunächst StatusBarIOS ist veraltetso dass Sie importieren müssen StatusBar und fügen Sie einfach diesen code-snippet oben in deinem render:

    <StatusBar hidden={true} />

    Reagieren Nativen Docs auf StatusBar

    InformationsquelleAutor der Antwort Rheisen

  2. 41

    Können Sie aufrufen, diese Methode überall in Ihrer Komponente:

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

class MyComponent extends Component {

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

    EDIT:

    Dieser blendet die Statusleiste für die gesamte app-und nicht nur in Ihrem spezifischen Komponente, um dieses Problem zu lösen, die Sie tun können:

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

    Oder durch aufrufen dieser Methode mit false von woanders.

    InformationsquelleAutor der Antwort Nir Ben-Yair

  3. 2

    Bevorzuge ich die einfache Möglichkeit, den Import der StatusBar - Komponente und die übergabe wahr zu versteckt prop...

    So Einfach:

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

    InformationsquelleAutor der Antwort Alireza

  4. 2

    Von version 0.?? zum Strom (0.55 /Juni 2018)

    <StatusBar hidden />

    Kredit für den ersten Kommentar in diese Antwort

    Denken Sie daran, zuerst importieren Sie die StatusBar-Komponente nach den anderen Antworten hier

    InformationsquelleAutor der Antwort

  5. 0

    Wenn Ihr Grund für das verstecken ist es zu verhindern, dass Ihre Komponenten von überlappenden es, Sie könnten es vorziehen, verwenden Sie einfach SafeAreaView wie folgt:

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

    Sollte es sein, die übergeordneten Komponente von einem Bildschirm und kann Optional eine backgroundColor entsprechend der Farbe auf Ihrem Bildschirm. Stellen Sie sicher, dass eine flex Attribut. Ihre Komponenten werden jetzt nur noch dauern, bis irgendein Bereich nicht verwendet wird, von der status-bar. Dies ist besonders nützlich, um sich in der "Kerbe" Problem mit einigen der neueren Modelle.

    SafeAreaView ist eine Komponente reagieren,-Muttersprachler, so dass Sie brauchen, um stellen Sie sicher, dass Sie es hinzufügen, um Ihre Importe:

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

    InformationsquelleAutor der Antwort kojow7

Schreibe einen Kommentar