Получите высоту SafeAreaView изнутри BottomTabBar

Question

Я пытаюсь использовать react-native-keyboard-spacer в сочетании с react-navigation.

В настоящее время я устанавливаю topSpacing распорки клавиатуры как-49, которая является высотой панели вкладок от react-navigation, но панель вкладок находится в пределах SafeAreaView, которая магически добавляет заполнение для перемещения содержимого в область, которая нене мешать работе собственного интерфейса.

Это означает, что при просмотре приложения на iPhone X или других подобных устройствах панель вкладок становится выше, чем 50.

.лучший способ получить высоту SafeAreaView?

Answer 1

Вот заполнение списка из react-navigation SafeAreaView

Режим LandScape

paddingLeft: 44
paddingRight: 44
paddingBottom: 24
paddingTop: 0

Портретный режим

paddingLeft: 0
paddingRight: 0
paddingBottom:34
paddingTop:44  // ... Including Status bar height

Answer 2

npm установить реакцию-родной-безопасный-просмотр области

import { getInset } from 'react-native-safe-area-view';
const bottomPadding = getInset('bottom', false); //2nd param islandscape
//outputs bottom safe area height

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 } }
})