从BottomTabBar中获取SafeAreaView的高度

Question

我试图将react-native-keyboard-spacer与react-navigation结合使用。

我目前将键盘垫片的topSpacing设置为-49，这是react-navigation标签栏的高度，但标签栏位于SafeAreaView内，它可以神奇地添加填充以将内容移动到不会干扰本机UI的区域。

这意味着当在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

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