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
react-native
ios7-statusbar
Ed vom Berg
quelle
quelle
Antworten:
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);
quelle
<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?Fügen Sie
import { StatusBar } from 'react-native';
oben hinzuapp.js
und fügen Sie dannStatusBar.setBarStyle('light-content', true);
als erste Zeile in Ihrem hinzurender()
, 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.
quelle
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.
quelle
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;
quelle
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> ) }
quelle
iOS
.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 ...
quelle