从BottomTabBar中获取SafeAreaView的高度

Question

我正在尝试将react-native-keyboard-spacer与react-navigation结合使用。

我当前将键盘间隔的topSpacing设置为-49，这是标签栏距react-navigation的高度，但是标签栏位于{{3} }，神奇地添加了填充以将内容移动到不会干扰本机UI的区域。

这意味着在iPhone X或其他类似设备上查看应用程序时，选项卡栏变得比50高。

获取SafeAreaView高度的最佳方法是什么？

Answer 1

这是react-navigation SafeAreaView中的列表填充

景观模式

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

肖像模式

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

Answer 2

您可以使用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 } }
})

Answer 3

npm install react-native-safe-area-view

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