Как узнать полезную высоту устройства iOS в React Native?

Question

В некоторых особых случаях мне нужно установить высоту просмотра на полную высоту полезной области устройства (без использования flex).

Я использовал жестко запрограммированную «высоту надреза» для вычисления этой полезной высоты, но я только что обнаружил, что надрез может иметь различную высоту в зависимости от устройства. (Разница в 3 балла между iPhone XS и iPhone XS Max).

Есть ли способ узнать полезную высоту устройства с выемкой и безопасной областью?

Answer 1

Как сказал @ mohammed-ashfaq, реакционно-нативный безопасный район решает проблему. Тем не менее, он возвращает вставки с обещанием, и мне нужны эти значения статически.

Учитывая это, я создал Reaction-native-Static-Safe-Area-Intsts , который позволяет получить доступ к значениям вставок в качестве констант.

Answer 2

Вы можете получить экран, по которому пользователи звонят, ширину и высоту из компонента 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 // Иногда вы можете получить процентное соотношение экрана, так чтоВы можете использовать это.screen% 60

Если вы хотите увидеть сейф для Iphone X. Вы можете использовать SafeAreaView Componenet

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

Answer 3

Вы можете использовать response-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 } }
})

Answer 4

Используйте модуль Dimension из «Reaction-native», как здесь:

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

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