web-dev-qa-db-fra.com

Encoche d'écran de détection React-Native

j'utilise nativebase.io comme cadre d'interface utilisateur pour mon application.

Mon problème

lorsque je saisis un en-tête pour un périphérique IOS, si le simulateur iPhone simule un iPhone X (où il y a une encoche en haut de l'écran), l'élément Header le détecte automatiquement et déplace l'élément Header plus bas l'écran.

certains appareils Android ont également une encoche similaire en haut de l'écran, mais lorsque j'utilise un élément nativebase.io Header, il ne détecte pas l'encoche et l'en-tête chevauche l'encoche.

Ma question

y a-t-il un moyen sur react-native ou nativebase.io de détecter si l’affichage présente une encoche? De cette façon, je pourrais compenser dynamiquement l'en-tête. 

react-nativenative-base
4
X0r0N

Puisque le problème est sur Android, vous devriez peut-être essayer de regarder dans StatusBar.currentHeight. Etant donné que l'encoche fait généralement partie de la barre d'état, l'ajout d'un remplissage au-dessus de l'en-tête correspond probablement à la taille de la barre d'état.

2
Filipe

Essayez d’utiliser SafeAreaView disponible sur React Native . Enveloppez votre vue actuelle . Consultez ce lien pour plus d’informations: https://facebook.github.io/react-native/docs/safeareaview

<SafeAreaView style={{flex: 1}}>
   [...Your view component]
</SafeAreaView>
0
MangMentongTV