Expo React Native设置headerShown:false后页面高度异常求助

当使用Expo Router的Stack组件并设置headerShown: false隐藏默认导航栏后，页面内容会向上偏移，导致顶部区域（如状态栏下方）的内容被遮挡，无法实现正常的布局效果。

解决方案 #

1. 用useSafeAreaInsets适配安全区域

借助react-native-safe-area-context提供的useSafeAreaInsets钩子，获取设备的安全区域边距，给页面容器添加顶部内边距，避免内容被状态栏或刘海遮挡。

首先确保已安装依赖：

npx expo install react-native-safe-area-context

然后在页面组件中使用：

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, Text } from 'react-native';

const HomeScreen = () => {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ flex: 1, paddingTop: insets.top }}>
      <Text>这是不会被顶部遮挡的内容</Text>
      {/* 其他页面元素 */}
    </View>
  );
};

export default HomeScreen;

2. 在Stack全局配置安全区域

直接在Stack的screenOptions中设置safeAreaInsets，让所有子页面自动适配顶部安全区域：

import { Stack } from "expo-router";
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Layout = () => {
  const insets = useSafeAreaInsets();
  
  return (
    <Stack
      screenOptions={{
        headerShown: false,
        safeAreaInsets: { top: insets.top }
      }}>
    </Stack>
  );
};

export default Layout;

3. 用SafeAreaView包裹页面内容

使用SafeAreaView直接包裹页面内容，它会自动适配设备的安全区域，避免内容被系统UI遮挡：

import { SafeAreaView, Text } from 'react-native';

const ProfileScreen = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>顶部安全区域已自动适配</Text>
      {/* 其他页面元素 */}
    </SafeAreaView>
  );
};

export default ProfileScreen;

注意：需要在项目根组件（如_app.js）中用SafeAreaProvider包裹所有内容：

import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Slot } from 'expo-router';

export default function App() {
  return (
    <SafeAreaProvider>
      <Slot />
    </SafeAreaProvider>
  );
}

以上几种方法都能有效解决隐藏导航栏后的内容遮挡问题，推荐根据项目需求选择，其中useSafeAreaInsets和SafeAreaView的适配性更强，能兼容不同机型的特殊布局。

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