Comment avoir différentes couleurs en haut et en bas de SafeAreaView avec l'iPhone X
Nov 26 2020
Cette question a déjà été répondue , mais la solution proposée ne fonctionne plus:
return (
<Fragment>
<SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
<View style={{ flex: 1, backgroundColor: 'white' }} />
</SafeAreaView>
</Fragment>
);
Devrait me donner:

M'a donné à la place:

Comme vous pouvez le voir, l'ordre d'affichage n'est pas le même.
J'ai le même problème sur iOS.
J'utilise react 16.13.1
, peut-être que quelque chose a changé depuis la dernière réponse?
Quelles sont mes alternatives?
Merci
Réponses
1 MoreFoam Nov 26 2020 at 04:26
Ce qui suit a fonctionné pour moi, en utilisant 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>
);
Capture d'écran iOS:

Capture d'écran Android:

LuckyPal Nov 26 2020 at 04:55
Dans mes expériences, StatusBar
de react-native
bien fonctionné pour moi. Exemple:
import { StatusBar } from 'react-native';
return (<Fragment>
<StatusBar
backgroundColor="#f00"
barStyle="light-content"
/>
<Fragment>);
Acclamations.