reactjs - 在 React-Navigation 中获取任何设备上标签栏的高度

Question

我想在 React-Navigation V2 中的 createBottomTabNavigator TabBar 上方放置一个组件。

标签栏的高度在不同设备上似乎有所不同(尤其是 iOS 设备)。有没有办法计算标签栏在设备上显示的高度？

Answer 1

react 导航 5 +

您现在有两个选项来获取底部TabBar 的高度。

要获取底部标签栏的高度，可以将 BottomTabBarHeightContext 与 React 的 Context API 结合使用，或者使用自定义 Hook 的 useBottomTabBarHeight:

import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

// ...

<BottomTabBarHeightContext.Consumer>
  {tabBarHeight => (
    /* render something */
  )}
</BottomTabBarHeightContext.Consumer>

或

import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

// ...

const tabBarHeight = useBottomTabBarHeight(); 

确保您使用 5.11.9 或更高版本