Ich arbeite an einem Tutorial für React Native Navigation. Ich fand heraus, dass das gesamte Layout vom oberen Bildschirmrand anstatt unterhalb der Statusleiste geladen wird. Dies führt dazu, dass sich die meisten Layouts mit der Statusleiste überschneiden. Ich kann dies beheben, indem ich der Ansicht beim Laden einen Abstand hinzufüge. Ist das der eigentliche Weg, es zu tun? Ich denke nicht, dass das manuelle Hinzufügen von Polstern ein tatsächlicher Weg ist, dies zu lösen. Gibt es eine elegantere Möglichkeit, dies zu beheben?
import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
export default class MyScene extends Component {
static get defaultProps() {
return {
title : 'MyScene'
};
}
render() {
return (
<View style={{padding: 20}}> //padding to prevent overlap
<Text>Hi! My name is {this.props.title}.</Text>
</View>
)
}
}
Unten sehen Sie die Screenshots vor und nach dem Hinzufügen der Polsterung.
ios
react-native
Cliff
quelle
quelle
Antworten:
Es gibt eine sehr einfache Möglichkeit, dies zu beheben. Machen Sie eine Komponente.
Sie können eine StatusBar-Komponente erstellen und diese nach dem ersten View-Wrapper in Ihren übergeordneten Komponenten zuerst aufrufen.
Hier ist der Code für den, den ich benutze:
'use strict' import React, {Component} from 'react'; import {View, Text, StyleSheet, Platform} from 'react-native'; class StatusBarBackground extends Component{ render(){ return( <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop </View> ); } } const styles = StyleSheet.create({ statusBarBackground: { height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar) backgroundColor: "white", } }) module.exports= StatusBarBackground
Nachdem Sie dies getan und in Ihre Hauptkomponente exportiert haben, rufen Sie es folgendermaßen auf:
import StatusBarBackground from './YourPath/StatusBarBackground' export default class MyScene extends Component { render(){ return( <View> <StatusBarBackground style={{backgroundColor:'midnightblue'}}/> </View> ) } }
quelle
MidnightBlue
ist ungültig, von React Native mitgeteilt: Warnung: Fehlgeschlagener Requisitentyp: Ungültige RequisitebackgroundColor
geliefertmidnightblue
.height: (Platform.OS === 'ios') ? 20 : StatusBar.currentHeight,
Stattdessen erhalten? 20 : 0,
Sie auf Android das gleiche Ergebnis.Jetzt können Sie Folgendes verwenden,
SafeAreaView
das in React Navigation enthalten ist:<SafeAreaView> ... your content ... </SafeAreaView>
quelle
react-navigation
jetzt standardmäßig enthalten ist.Ich habe es auf einfachere Weise versucht.
Wir können die Höhe der Statusleiste auf Android ermitteln und SafeAreaView zusammen mit dieser verwenden, damit der Code auf beiden Plattformen funktioniert.
import { SafeAreaView, StatusBar, Platform } from 'react-native';
Wenn wir uns abmelden
Platform.OS
undStatusBar.currentHeight
die Protokolle erhalten,console.log('Height on: ', Platform.OS, StatusBar.currentHeight);
Höhe ein: Android 24 und Höhe ein: Android 24
Wir können jetzt optional Rand / Abstand zu unserer Containeransicht hinzufügen, indem wir
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
Der endgültige Code in App.js ist unten:
export default class App extends React.Component { render() { return ( <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}> <View style={styles.container}> <Text>Hello World</Text> </View> </SafeAreaView> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0 } });
quelle
@philipheinser Lösung funktioniert in der Tat.
Ich würde jedoch erwarten, dass die StatusBar- Komponente von React Native dies für uns erledigt .
Leider nicht, aber wir können das ganz einfach abstrahieren, indem wir unsere eigene Komponente darum herum erstellen:
./StatusBar.js
import React from 'react'; import { View, StatusBar, Platform } from 'react-native'; // here, we add the spacing for iOS // and pass the rest of the props to React Native's StatusBar export default function (props) { const height = (Platform.OS === 'ios') ? 20 : 0; const { backgroundColor } = props; return ( <View style={{ height, backgroundColor }}> <StatusBar { ...props } /> </View> ); }
./index.js
Vor: Nach:import React from 'react'; import { View } from 'react-native'; import StatusBar from './StatusBar'; export default function App () { return ( <View> <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" /> { /* rest of our app */ } </View> ) }
quelle
Die
react-navigation
Dokumente haben eine großartige Lösung dafür. Zunächst einmal empfehlen sie , dasSafeAreaView
in React Native enthaltene nicht zu verwenden, weil:Stattdessen empfehlen sie den Kontext "React-Native-Safe-Area" - mit dem es so aussehen würde:
import React, { Component } from 'react'; import { View, Text, Navigator } from 'react-native'; import { useSafeArea } from 'react-native-safe-area-context'; export default function MyScene({title = 'MyScene'}) { const insets = useSafeArea(); return ( <View style={{paddingTop: insets.top}}> <Text>Hi! My name is {title}.</Text> </View> ) }
Ich möchte darauf hinweisen, dass es wahrscheinlich eine bessere Idee ist, das zu verwenden
SafeAreaView
, was diese Bibliothek bietet, da Telefone heutzutage möglicherweise auch Elemente am unteren Rand haben, die UI-Elemente überlappen können. Es hängt natürlich alles von Ihrer App ab. (Weitere Informationen hierzu finden Sie in denreact-navigation
Dokumenten, auf die ich am Anfang verlinkt habe.)quelle
Hier ist ein Weg, der für iOS funktioniert :
<View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}> <StatusBar barStyle="dark-content"/></View>
quelle
Sie können dies tun, indem Sie Ihrer Navigationsleistenkomponente eine Auffüllung hinzufügen oder einfach eine Ansicht hinzufügen, die dieselbe Höhe wie die Statusleiste oben in Ihrem Ansichtsbaum hat und eine Hintergrundfarbe wie die Facebook-App aufweist.
quelle
Nur einfacher Benutzer Reagieren Sie auf die native Standardstatusleiste, um diese Funktionalität zu erreichen.
<View style={styles.container}> <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} /> <MapView provider={PROVIDER_GOOGLE} // remove if not using Google Maps style={styles.map} region={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.015, longitudeDelta: 0.0121, }} /> </View>
quelle