web-dev-qa-db-ja.com

React NativeでiOSデバイスの有効な高さを知る方法は？

非常に特殊なケースでは、ビューの高さを（フレックスを使用せずに）デバイスの有用な領域の完全な高さに設定する必要があります。

ハードコーディングされた「ノッチ高さ」を使用してこの有効な高さを計算していましたが、デバイスによってノッチの高さが異なる場合があることを発見しました。 （iPhone XSとiPhone XS Maxの3ポイントの違い）。

ノッチと安全領域があるデバイスの有効な高さを知る方法はありますか？

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

react-native-safe-area を使用できます。セーフエリアインセットの上下左右を取得する機能を提供します。

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

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 //これを使用できるように、画面のパーセンテージを取得できる場合があります。画面％60

金庫がIphone X用であるのを見たい場合は、SafeAreaView Componenetを使用できます。

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

@ mohammed-ashfaqが言ったように、 react-native-safe-area は問題を解決します。しかし、それは約束を備えたインセットを返し、私はそれらの値を静的に必要としました。

それを踏まえて、定数としてインセット値へのアクセスを可能にする react-native-static-safe-area-insets を作成しました。

1
JPHorta

そこにあるような 'react-native'のDimensionモジュールを使用してください：

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

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