React Native + Expo页面内容溢出至导航栏下方的问题求助

大家好，我最近在Expo + React Native项目里遇到了一个特别费解的bug——按照React Native官方文档的布局逻辑，页面内容应该自动避开导航栏区域，但我的documents页面却出现了内容溢出屏幕、跑到导航栏下方的情况，而项目里其他所有页面都能正常遵守布局规则。

问题相关代码与配置 #

出问题的页面布局代码 #

这个页面的核心布局很简单，蓝色父容器占满屏幕，红色方块应该紧贴屏幕底部，但实际它却被导航栏遮挡了一部分：

<View style={{flex: 1, backgroundColor: 'blue', justifyContent: 'flex-end'}}>
  <View style={{width: 50, height: 50, backgroundColor: 'red'}}></View>
</View>

导航栈（Native Stack）配置 #

项目使用@react-navigation/native-stack做栈导航，documents页面的栈配置如下：

<Stack screenOptions={screenOptions} initialRouteName={initialRoute()}>
  <Stack.Screen
    name="documents"
    options={{
      title: AppText.DocumentsTitle,
    }}
  />
</Stack>

export const screenOptions: NativeStackNavigationOptions = {
  headerTitleAlign: 'center',
  headerBackButtonDisplayMode: 'minimal',
};

Tab导航（_layout.tsx）相关配置 #

项目底层用Tabs做根导航，相关配置片段：

<Tabs
  screenOptions={{
    tabBarActiveTintColor: theme.colors.tint,
    headerShown: false,
  }}
>
  <Tabs.Screen
    name="(stopwatches)"
    options={{
      tabBarIcon: ({ color }) => <Fontawesome name="clock-o" color={color} />,
      href: '/content/(stopwatches)/stopwatch_list',
      title: "Stopwatches",
    }}
  />
  {/* 其他Tab页面配置... */}
</Tabs>

项目依赖版本 #

这里附上完整的依赖列表，方便大家排查版本兼容问题：

"dependencies": {
  "@expo/vector-icons": "^14.0.2",
  "@react-native-async-storage/async-storage": "1.23.1",
  "@react-native-community/datetimepicker": "8.2.0",
  "@react-native-community/slider": "4.5.5",
  "@react-navigation/native": "^7.0.0",
  "@react-navigation/native-stack": "^7.0.0",
  "@tanstack/react-query": "5.28.4",
  "axios": "^1.7.7",
  "expo": "~52.0.46",
  "expo-application": "~6.0.2",
  "expo-auth-session": "~6.0.3",
  "expo-build-properties": "~0.13.3",
  "expo-clipboard": "~7.0.1",
  "expo-crypto": "~14.0.2",
  "expo-dev-client": "~5.0.20",
  "expo-device": "~7.0.3",
  "expo-document-picker": "~13.0.3",
  "expo-file-system": "~18.0.3",
  "expo-font": "~13.0.1",
  "expo-image-picker": "~16.0.6",
  "expo-intent-launcher": "~12.0.2",
  "expo-linear-gradient": "~14.0.2",
  "expo-linking": "~7.0.5",
  "expo-local-authentication": "~15.0.2",
  "expo-location": "~18.0.10",
  "expo-router": "~4.0.21",
  "expo-screen-orientation": "~8.0.4",
  "expo-secure-store": "~14.0.1",
  "expo-sharing": "~13.0.1",
  "expo-splash-screen": "~0.29.24",
  "expo-status-bar": "~2.0.1",
  "expo-system-ui": "~4.0.9",
  "expo-updates": "~0.27.4",
  "expo-web-browser": "^14.0.2",
  "jest": "29.7.0",
  "jest-expo": "50.0.4",
  "react": "18.3.1",
  "react-dom": "18.3.1",
  "react-native": "0.76.9",
  "react-native-blob-util": "~0.21.2",
  "react-native-countdown-circle-timer": "3.2.1",
  "react-native-gesture-handler": "~2.20.2",
  "react-native-maps": "1.18.0",
  "react-native-pager-view": "6.5.1",
  "react-native-pdf": "~6.7.6",
  "react-native-popup-menu": "0.16.1",
  "react-native-reanimated": "~3.16.1",
  "react-native-render-html": "6.3.4",
  "react-native-safe-area-context": "4.12.0",
  "react-native-screens": "~4.4.0",
  "react-native-signature-canvas": "4.7.2",
  "react-native-svg": "15.8.0",
  "react-native-tab-view": "3.5.2",
  "react-native-web": "~0.19.13",
  "react-native-webview": "13.12.5",
  "expo-camera": "~16.0.18"
}

已做的排查 #

我已经确认了以下几点：

• 其他页面使用相同的flex:1布局方式，均正常避开导航栏
• 没有给documents页面设置任何特殊的全屏、沉浸式或忽略安全区域的配置
• react-native-safe-area-context已经正确安装并在项目中全局配置

有没有同学遇到过类似的问题？或者能给我一些排查方向？非常感谢！

内容来源于stack exchange