从BottomTabBar中获取SafeAreaView的高度

Question

我试图与... react-native-keyboard-spacer一起使用react-navigation.

我目前设置topSpacing的键盘间隔的是-49这是从标签栏的高度react-navigation,但标签栏不到SafeAreaView它神奇地添加填充内容移动到不与原生UI抵触的区域.

这意味着当在iPhone X或其他类似设备上查看应用程序时,标签栏会变得比高50.

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

Answer 1

另一种选择react-native-safe-area-context（https://github.com/th3rdwave/react-native-safe-area-context）：

import { useSafeAreaInsets } from 'react-native-safe-area-context';
...
const insets = useSafeAreaInsets();

然后你可以得到底部安全区域的高度safeAreaInsets.bottom。

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

这是来自react-navigationSafeAreaView 的列表填充

景观模式

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

人像模式

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