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, StatusBarde react-nativebien fonctionné pour moi. Exemple:

import { StatusBar } from 'react-native';

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

Acclamations.