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

Question

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

标签栏的高度在各种设备（尤其是iOS设备）上似乎有所不同。有没有一种方法可以计算标签栏在设备上显示的高度？

Answer 1

反应导航 5 +

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

要获取底部选项卡栏的高度，可以将 BottomTabBarHeightContext 与 React 的 Context API 一起使用，或者 useBottomTabBarHeight，这是一个自定义 Hook：

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或更高版本

Answer 2

当您检查react-navigation 用于的源代码时react-navigation-tabs，您会看到只有两个不同的底部标签栏高度。紧凑和默认，在某些情况下会改变。您还可以根据这些条件手动设置组件的位置。createBottomTabNavigator