Jak mieć różne kolory na górze i na dole SafeAreaView w Iphone X

Nov 26 2020

Na to pytanie już odpowiedziano , ale proponowane rozwiązanie już nie działa:

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

Powinien mi dać:

Zamiast tego dał mi:

Jak widać, kolejność wyświetlania nie jest taka sama.

Mam ten sam problem na iOS.

Używam Reaguj 16.13.1, może coś się zmieniło od ostatniej odpowiedzi?

Jakie mam alternatywy?

Dzięki

Odpowiedzi

1 MoreFoam Nov 26 2020 at 04:26

Poniższe działały dla mnie, używając React 16.13.1:

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

Zrzut ekranu iOS:

Zrzut ekranu Androida:

LuckyPal Nov 26 2020 at 04:55

Z moich doświadczeń wynika, że StatusBarz react-nativedobrze mi się udało. Przykład:

import { StatusBar } from 'react-native';

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

Twoje zdrowie.