So haben Sie mit Iphone X unterschiedliche Farben oben und unten in SafeAreaView

Nov 26 2020

Diese Frage wurde bereits beantwortet , aber die vorgeschlagene Lösung funktioniert nicht mehr:

return (
  <Fragment>
    <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
    <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
      <View style={{ flex: 1, backgroundColor: 'white' }} />
    </SafeAreaView>
  </Fragment>
);

Sollte mir geben:

Hat mir stattdessen gegeben:

Wie Sie sehen können, ist die Ansichtsreihenfolge nicht dieselbe.

Ich habe das gleiche Problem unter iOS.

Ich benutze reagieren 16.13.1, vielleicht hat sich seit der letzten Antwort etwas geändert?

Was sind meine Alternativen?

Vielen Dank

Antworten

1 MoreFoam Nov 26 2020 at 04:26

Folgendes hat bei mir mit React 16.13.1 funktioniert:

return (
        <Fragment>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "red"}}/>
            <View style={{flex: 1, backgroundColor: "white"}}/>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "gray"}}/>
        </Fragment>
    );

iOS-Screenshot:

Android Screenshot:

LuckyPal Nov 26 2020 at 04:55

Nach meinen Erfahrungen hat StatusBarvon react-nativegut für mich funktioniert. Beispiel:

import { StatusBar } from 'react-native';

return (<Fragment>
    <StatusBar
        backgroundColor="#f00"
        barStyle="light-content"
    />
<Fragment>);

Prost.