Wie stelle ich die Hintergrundfarbe der iOS-Statusleiste in React Native ein?

74

Gibt es eine einzige Stelle im nativen iOS-Code für die Reaktion, die ich ändern kann, um die Hintergrundleiste für die iOS-Statusleiste festzulegen? RCTRootView.m?

Die reaktive native StatusBar- Komponente unterstützt nur backgroundColor für Android.

Das iOS-Betriebssystem scheint das Einstellen der Statusleiste backgroundColor zu ermöglichen

Mein Ziel ist es, eine dunklere Statusleistenfarbe zu haben. Beispiel

Ed vom Berg
quelle
Gibt es eine Möglichkeit, den Quellcode für eine Taskleiste mit diesen Schaltflächen abzurufen (Menü, Suche usw.)? danke
AlainIb
github.com/oblador/react-native-vector-icons enthält alle Google Material Design-Symbole unter material.io/icons sowie viele andere Symbole, die Sie hier durchsuchen können: oblador.github.io/react-native-vector-icons
Ed of the Mountain

Antworten:

194

iOS hat kein Konzept für eine Statusleiste bg. So erreichen Sie dies plattformübergreifend:

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  StatusBar,
  Platform,
} from 'react-native';

const MyStatusBar = ({backgroundColor, ...props}) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);

class DarkTheme extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
        <View style={styles.appBar} />
        <View style={styles.content} />
      </View>
    );
  }
}

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
  appBar: {
    backgroundColor:'#79B45D',
    height: APPBAR_HEIGHT,
  },
  content: {
    flex: 1,
    backgroundColor: '#33373B',
  },
});

AppRegistry.registerComponent('App', () => DarkTheme);

Simulator

jmurzy
quelle
12
Beeindruckend! Ich habe gerade sowohl auf Android als auch auf iOS getestet. Perfekt! Das ist eine hervorragende plattformübergreifende Lösung, die sofort funktioniert! Vielen Dank, dass Sie sich die Zeit genommen haben, dies zu posten. Ich gehe davon aus, dass dies vielen Entwicklern helfen wird.
Ed of the Mountain
Ich habe versucht, eine ähnliche Korrektur mit der <Navigator.NavigationBar/>Komponente für den Rest der Navigationsleiste durchzuführen, konnte sie jedoch nicht zum Laufen bringen (habe einen oberen Rand ausprobiert und eine andere Komponente darin eingefügt). Irgendwelche Ideen?
Brad Adams
1
Funktioniert dies nicht nur, wenn Ihr Inhalt nicht größer als die Bildschirmgröße ist? Wenn Sie scrollen müssen, wird der Hintergrund der Statusleiste ausgeblendet.
Etwas am
1
@sowmya Die Lösung wurde aktualisiert, um Unterstützung für neuere Versionen von Android hinzuzufügen.
jmurzy
@jmurzy nicht sicher, warum ich eine Farbverlaufsfarbe in meiner Statusleiste habe ... eine Idee, wie ich sie entfernen kann? Ich will es wie dein Beispiel, flach ...
ComeRun
52

Fügen Sie import { StatusBar } from 'react-native';oben hinzu app.jsund fügen Sie dann StatusBar.setBarStyle('light-content', true);als erste Zeile in Ihrem hinzu render(), um den Text / die Symbole der Statusleiste in Weiß zu ändern.

Die anderen Farboptionen sind 'default'und 'dark-content'.

Weitere Informationen finden Sie unter https://facebook.github.io/react-native/docs/statusbar.html .

Davon abgesehen: Nein, Sie müssten dem von Ihnen angegebenen Link folgen.

dv3
quelle
Wo würde man diesen Aufruf im Idealfall an StatusBar.setBarStyle () setzen? Ich habe versucht, es in render () und in componentWillMount meiner Root-Komponente einzufügen, aber es stürzte Xcode schwer ab ... Gibt es eine andere Stelle, die ein guter Kandidat für diesen Aufruf wäre? Vielen Dank!
Evan Stone
OK - Ich glaube, ich habe es behoben. Es gab zwei weitere Probleme, die ich nicht erwähnt habe: 1) Ich verwende ein NavigatorIOS mit der Statusleiste (die meisten Beispiele, die ich gesehen habe, verwenden einen generischen Navigator) und 2) Ich teste auf einem Gerät mit Release-Konfiguration. Also ... um es zu lösen, habe ich den Aufruf aus der Root-Komponente genommen und in die Komponente verschoben, die von der initialRoute des NavigatorIOS verwendet wird (nennen wir es ToDoList). In ToDoLists componentDidMount habe ich den Aufruf von StatusBar.setBarStyle hinzugefügt ('light-content', false) und es hat funktioniert!
Evan Stone
4

Wenn Sie die reaktionsnative Navigation verwenden, müssen Sie:

1-) Fügen Sie dies Ihrer info.plist-Datei hinzu:

<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>

2-) In der ersten Zeile Ihrer render()Funktion, z.

  render(){
    this.props.navigator.setStyle({
      statusBarTextColorScheme: 'light'
    });
    return (
      <Login navigator={this.props.navigator}></Login>
    );
  }

In diesem Beispiel wird Ihre Statusleiste in helle Text- / Schaltflächen- / Symbolfarben umgewandelt. Geben Sie hier die Bildbeschreibung ein

Luis Antonio Pestana
quelle
1
Der von Ihnen gepostete Code setzt nur das Textthema der Statusleiste auf Licht. Wie haben Sie den gleichen Hintergrund wie der Inhalt erreicht?
Ash
@Ash Ich gehe davon aus, dass, wenn der Header automatisch rot im Hintergrund ist, die Statusleiste rot ist, weil der Header hinter der Statusleiste positioniert wird
Cristian Camilo Cedeño Gallego
3

Stellen Sie die iOS- und Android-Statusleiste backgroundColor in reag-native ein

    import React, { Component } from 'react';
    import { Platform, StyleSheet, View, StatusBar } from 'react-native';
    import Constants from 'expo-constants';


    class Statusbar extends Component {

        render() {
            return (
                <View style={styles.StatusBar}>
                    <StatusBar translucent barStyle="light-content" />
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        StatusBar: {
            height: Constants.statusBarHeight,
            backgroundColor: 'rgba(22,7,92,1)'
        }
    });

    export default Statusbar;
Talha Javed
quelle
2
 render() {
        let { email, password, isLoading } = this.state
        return (
            <View style={{ flex: 1, }}>
                <StatusBar
                    translucent
                    barStyle="light-content"
                    //  backgroundColor="rgba(0, 0, 0, 0.251)"
                    backgroundColor='magenta'
                 />
            </View>
            )
        }

Geben Sie hier die Bildbeschreibung ein

Keshav Gera
quelle
Statusleiste von native reagieren?
Khurshid Ansari
3
Dies ist ein Android-Handy. Diese Frage ist für iOS.
Ivanka Todorova
0

Zur Stammansicht hinzufügen. (Aus SafeAreaView, falls vorhanden)

{Platform.OS === 'ios' &&
 <View style={{
     width: "100%",
     height: 100, // For all devices, even X, XS Max
     position: 'absolute',
     top: 0,
     left: 0,
     backgroundColor: "red"}}
/>}
// App screen
...
oolionoo
quelle