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

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.

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

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.

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.

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;

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

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
...