如何防止视图被Expo Router TabBar遮挡？

为什么需要设置125的paddingBottom而非50？ #

1. TabBar默认高度远超50：Expo Router的默认底部TabBar本身高度通常在70左右（包含图标、文字和内边距），并非你预设的50。
2. 安全区域叠加影响：iOS设备底部的刘海/灵动岛安全区域（高度约55px）会被TabBar自动适配，实际占据的垂直空间是TabBar自身高度+安全区域高度，两者相加刚好接近125。
3. tabBarStyle设置未生效：你写的tabBarStyle:{height:50}没起作用，大概率是配置位置错误——Expo Router的Tabs样式需要在screenOptions全局配置或单页面options中设置，直接写的样式会被默认样式覆盖。

常规解决方法 #

• 正确配置TabBar并适配安全区域：在Tabs全局配置中设置样式，同时利用安全区域工具自动适配底部间距：

  // app/_layout.js
  import { Tabs } from 'expo-router';
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  
  export default function TabLayout() {
    const insets = useSafeAreaInsets();
    return (
      <Tabs
        screenOptions={{
          tabBarStyle: {
            height: 70,
            paddingBottom: insets.bottom, // 自动适配底部安全区域
          },
        }}
      >
        {/* 你的Tab页面（Dashboard等） */}
      </Tabs>
    );
  }
  

• 给滚动容器加动态内边距：不要硬写固定数值，根据TabBar实际高度+安全区域设置paddingBottom，确保内容不被遮挡。
• 修复flexGrow无效问题：先给页面根容器设置flex:1，让ScrollView能占据除TabBar外的剩余空间，再给ScrollView的contentContainerStyle加flexGrow:1才会生效。

如何获取TabBar的实际高度？ #

直接用React Navigation（Expo Router基于它）提供的useBottomTabBarHeight钩子，无需硬写数值：

// 在WorkoutList组件中
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { ScrollView } from 'react-native';

export default function WorkoutList() {
  const tabBarHeight = useBottomTabBarHeight();
  return (
    <ScrollView
      contentContainerStyle={{
        paddingBottom: tabBarHeight + 10, // 额外加10px避免内容紧贴TabBar
      }}
    >
      {/* 你的 workout 列表项 */}
    </ScrollView>
  );
}

如果是Expo Router v2+，也可直接从expo-router导入该钩子：

import { useBottomTabBarHeight } from 'expo-router';

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