React-Navigation中获取任意设备上Tab Bar的高度

嘿，这个问题我之前帮不少开发者解决过！在React Navigation V2里要获取BottomTabNavigator的TabBar高度（适配不同iOS设备的差异），其实有几个靠谱的方法，我给你一步步拆解：

方法1：通过onLayout事件实时测量（最准确） #

这是最稳妥的方式，因为onLayout能拿到TabBar实际渲染后的尺寸，不管系统默认高度还是自定义高度都能精准捕获。你可以自定义一个TabBar组件来监听布局变化：

import React from 'react';
import { View } from 'react-native';
import { createBottomTabNavigator, TabBarBottom } from 'react-navigation';

class CustomTabBar extends React.Component {
  state = { tabBarHeight: 0 };

  handleTabBarLayout = (event) => {
    const { height } = event.nativeEvent.layout;
    this.setState({ tabBarHeight: height });
    // 把高度传递给需要的组件，比如通过回调函数
    if (this.props.onHeightChange) {
      this.props.onHeightChange(height);
    }
  };

  render() {
    // 复用原生的TabBarBottom组件，只加布局监听
    return (
      <View onLayout={this.handleTabBarLayout}>
        <TabBarBottom {...this.props} />
      </View>
    );
  }
}

// 配置TabNavigator时使用自定义TabBar
const MyTabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    tabBarComponent: (props) => (
      <CustomTabBar 
        {...props} 
        onHeightChange={(height) => {
          console.log('当前TabBar高度：', height);
          // 这里可以把高度存到状态管理或者传递给上方组件
        }} 
      />
    ),
  }
);

拿到高度后，你就可以把它传递给TabBar正上方的组件，比如通过props、Context或者状态管理工具，然后给上方组件设置bottom: tabBarHeight的绝对定位，就能刚好放在TabBar顶部。

方法2：计算默认TabBar的高度（仅限原生默认TabBar） #

如果你用的是React Navigation自带的默认TabBar，可以结合系统默认值和安全区高度来计算：

• iOS默认TabBar高度是49px，iPhone X及以后的设备会额外加上34px的底部安全区高度
• Android默认TabBar高度是56px

代码示例：

import { Platform, Dimensions } from 'react-native';

const getBottomSafeAreaHeight = () => {
  const { height, width } = Dimensions.get('window');
  // 判断是否是iPhone X系列设备
  const isIPhoneXSeries = (height === 812 || width === 812) || (height === 896 || width === 896);
  return isIPhoneXSeries ? 34 : 0;
};

// 计算默认TabBar高度
const defaultTabBarHeight = Platform.OS === 'ios' 
  ? 49 + getBottomSafeAreaHeight() 
  : 56;

⚠️ 注意：这个方法只适用于原生默认TabBar，如果自定义了TabBar高度，结果就不准确了，所以优先推荐方法1。

把高度传递给上方组件的示例 #

假设你有个要放在TabBar上方的组件，可以这样用获取到的高度：

class FloatingAboveTabBar extends React.Component {
  render() {
    return (
      <View 
        style={{
          position: 'absolute',
          bottom: this.props.tabBarHeight,
          left: 0,
          right: 0,
          height: 60,
          backgroundColor: '#f5f5f5',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text>我在TabBar正上方！</Text>
      </View>
    );
  }
}

内容的提问来源于stack exchange，提问作者Liam Kelly