web-dev-qa-db-fra.com

Comment connaître la hauteur utile d'un appareil iOS en React Native?

Dans certains cas très spécifiques, je dois définir la hauteur d'une vue sur toute la hauteur de la zone utile de l'appareil (sans utiliser de flex).

J'utilisais une "hauteur d'encoche" codée en dur pour calculer cette hauteur utile, mais je viens de découvrir que l'encoche peut avoir des hauteurs différentes selon l'appareil. (3 points de différence entre iPhone XS et iPhone XS Max).

Existe-t-il un moyen de connaître la hauteur utile d'un appareil avec encoche et zone de sécurité?

iosreactjsreact-nativereact-native-androidreact-native-ios
5
jphorta

Vous pouvez utiliser react-native-safe-area . il fournit une fonction pour obtenir une zone de sécurité en haut, en bas, à gauche, à droite.

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})
1
Mohammed Ashfaq

Vous pouvez obtenir l'écran, que les utilisateurs appellent, la largeur et la hauteur du composant Dimensions.

import { Dimensions } from 'react-native'

const { width, height } = Dimensions.get('window'); // if you use the width you can get the screen width by pixels. And also height is the height pixels of the phone.

const screenWidthSomePart = width * 0,6 // Parfois, vous pouvez obtenir le pourcentage de l'écran pour pouvoir l'utiliser. écran% 60

Si vous voulez voir que le coffre-fort est pour l'Iphone X. Vous pouvez utiliser le SafeAreaView Componenet

import { SafeAreaView } from 'react-native'
 return(
 <SafeAreaView>
   ..... // your screen componenet
 </SafeAreaView>
);
1
Yasin Ugurlu

Comme l'a dit @ mohammed-ashfaq, react-native-safe-area résout le problème. Cependant, il renvoie les encarts avec une promesse et j'avais besoin de ces valeurs statiquement.

Compte tenu de cela, j'ai créé react-native-static-safe-area-insets qui permet d'accéder aux valeurs des encarts sous forme de constantes.

1
JPHorta

Utilisez le module Dimension de 'react-native' comme ici:

import { Dimensions, Platform, StatusBar } from 'react-native'

const windowHeight = Dimensions.get('window').height
const screenHeight = Dimensions.get('screen').height
0
Vincent Menant