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 StatusBar
z react-native
dobrze mi się udało. Przykład:
import { StatusBar } from 'react-native';
return (<Fragment>
<StatusBar
backgroundColor="#f00"
barStyle="light-content"
/>
<Fragment>);
Twoje zdrowie.