webentwicklung-frage-antwort-db.com.de

Ausblenden der Statusleiste mit React Native

Wie blenden Sie die Statusleiste für iOS oder Android aus, wenn Sie mit React Native entwickeln? Ich habe StatusBar importiert, aber ich glaube, es gibt auch StatusBarIOS und eine StatusBar für Android.

41
Rheisen

Herausgefunden, wie die Statusleiste ausgeblendet wird. Zuallererst ist StatusBarIOS veraltet , also müssen Sie StatusBar importieren und dann einfach dieses Code-Snippet oben in Ihr Render einfügen:

<StatusBar hidden />

Native Docs auf StatusBar reagieren

82
Rheisen

Sie können diese Methode von überall in Ihrer Komponente aufrufen:

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

class MyComponent extends Component {

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

BEARBEITEN:

Dadurch wird die Statusleiste für die gesamte App und nicht nur in Ihrer spezifischen Komponente ausgeblendet. Um dies zu beheben, können Sie Folgendes tun:

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

Oder diese Methode mit false von irgendwo anders aufrufen.

49
Nir Ben-Yair

Ich bevorzuge die einfache Art, die StatusBar Komponente zu importieren und true an hidden prop zu übergeben ...

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

Ab Version 0. ?? aktuell (0.55/Juni 2018)

<StatusBar hidden />

Dank an den ersten Kommentar in diese Antwort

Denken Sie daran, zuerst die StatusBar-Komponente zu importieren wie in den anderen Antworten hier

Für versteckte:

StatusBar.setHidden(false, 'slide');

Zur Show:

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

Wenn Sie es ausblenden möchten, um zu verhindern, dass Ihre Komponenten überlappen, verwenden Sie SafeAreaView möglicherweise wie folgt:

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

Es sollte die übergeordnete Komponente eines Bildschirms sein und kann optional eine backgroundColor verwenden, um die Farbe Ihres Bildschirms anzupassen. Stellen Sie sicher, dass Sie ein flex-Attribut festlegen. Ihre Komponenten beanspruchen jetzt nur noch Bereiche, die nicht von der Statusleiste verwendet werden. Dies ist besonders hilfreich, wenn Sie mit einigen der neueren Handys das Problem der Kerbe umgehen möchten.

SafeAreaView ist eine Komponente von Reactive-Native, Sie müssen also sicherstellen, dass Sie es Ihren Importen hinzufügen:

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