React Native中使用react-native-navigation如何获取底部标签栏宽度？

DevOps 小满

2026-9-26

React Native没有专门针对该场景的专属API，可通过以下两种通用方案实现需求：

方案1：使用`onLayout`回调（推荐）

这是React Native官方提供的通用组件尺寸获取API，适用于自定义底部标签栏的场景：

封装自定义标签栏时，在外层容器绑定onLayout事件
事件回调中可直接获取标签栏的实时宽高、坐标信息
示例代码：

import { View } from 'react-native';
import { BottomTabBar } from 'react-native-navigation';

const CustomBottomTabBar = (props) => {
  const handleTabBarLayout = (e) => {
    const tabBarWidth = e.nativeEvent.layout.width;
    // 此处可使用获取到的宽度做后续逻辑处理
    console.log('底部标签栏宽度：', tabBarWidth);
  };

  return (
    <View onLayout={handleTabBarLayout}>
      <BottomTabBar {...props} />
    </View>
  );
};

该方案无需额外操作，布局更新时会自动触发回调返回最新尺寸，性能损耗极低。

方案2：使用`measure`方法（适用默认标签栏场景）

如果使用react-native-navigation默认底部标签栏，没有自定义组件，可通过获取标签栏节点引用后调用measure方法获取尺寸：
示例代码：

import { useRef, useEffect } from 'react';

// 已通过react-native-navigation提供的API获取到默认标签栏的引用tabBarRef
const SomeScreen = () => {
  const tabBarRef = useRef(null);

  useEffect(() => {
    // 需保证组件完成挂载后再调用measure方法
    tabBarRef.current?.measure((x, y, width, height, pageX, pageY) => {
      console.log('底部标签栏宽度：', width);
    });
  }, []);

  // 页面其余逻辑
}