React Native Navigation安卓端drawUnderStatusBar致TabBar底部截断求助

DevOps 小满

2026-5-28

问题：Android端设置drawUnderStatusBar: true后TabBar底部被截断

我在React Native项目里设置了drawUnderStatusBar: true来实现状态栏透明效果，结果发现TabBar的底部被截断了一半。这个问题只在Android端出现——毕竟drawUnderStatusBar是Android专属属性；如果把这个属性设为false，TabBar就能正常显示了。

TabBar底部被截断的截图

复现步骤

推送一个配置了drawUnderStatusBar: true的页面
返回到带有TabBar的主页面，即可看到TabBar底部被截断的问题

环境信息

React Native Navigation版本：1.1.334
React Native版本：0.55
平台：Android
设备信息：Nexus 6，Android 7.1.1，Debug模式

可行的解决方案

针对React Native Navigation 1.x版本的这个兼容性问题，你可以尝试以下几种办法：

手动适配TabBar底部内边距
在TabBar的样式中，针对Android平台添加底部内边距，弥补被截断的部分：

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

const styles = StyleSheet.create({
  tabBarContainer: {
    ...(Platform.OS === 'android' && {
      paddingBottom: 16, // 可根据实际截断程度调整数值
    }),
  },
});

页面切换时触发布局刷新
在主页面的焦点事件或生命周期中，临时调整drawUnderStatusBar属性来触发布局更新：

componentDidMount() {
  if (Platform.OS === 'android') {
    // 先关闭再重新启用，强制页面布局重绘
    this.props.navigation.setOptions({ drawUnderStatusBar: false });
    setTimeout(() => {
      this.props.navigation.setOptions({ drawUnderStatusBar: true });
    }, 100);
  }
}