如何解决Expo React Native应用安全区域导致的顶部空白问题？

1. 必须添加SafeAreaProvider包裹导航容器 #

你当前代码未用SafeAreaProvider包裹NavigationContainer，这是react-native-safe-area-context生效的核心前提，也是useSafeAreaInsets全返回0的直接原因。修改App.js：

import { SafeAreaProvider } from 'react-native-safe-area-context'; // 导入组件

export default function App() {
    // 原有代码保持不变

    return (
        <SafeAreaProvider> {/* 包裹整个导航容器 */}
            <NavigationContainer onReady={onLayoutRootView}>
                {/* 原有导航配置 */}
            </NavigationContainer>
        </SafeAreaProvider>
    )
}

2. 用安全区域值调整页面布局 #

在Login及所有页面中，通过useSafeAreaInsets获取顶部安全区域高度，给根布局或Header添加对应padding，抵消顶部空白：

import { useSafeAreaInsets } from 'react-native-safe-area-context'; // 导入钩子

export default function Login() {
    const insets = useSafeAreaInsets();

    return (
        <View
            style={[styles.body, { paddingTop: insets.top }]} // 给根View添加顶部安全区域padding
        >
            <Header
                title="Acesse sua
conta."
                backgroundColor="#89D2DC"
                centerHeader
                style={{
                    paddingLeft: 30,
                    flexDirection: 'column',
                    alignItems: 'flex-start',
                    // 如果需要Header顶满状态栏，可把paddingTop移到Header上
                    // paddingTop: insets.top
                }}
            ></Header>
            {/* 原有内容 */}
        </View>
    )
}

3. 检查Expo配置文件（app.json/app.config.js） #

确保Android状态栏配置和调试时一致，避免构建后样式突变导致空白：

{
  "expo": {
    "android": {
      "statusBar": {
        "translucent": true, // 和Expo Go调试时保持一致，设为false会强制预留状态栏空间
        "backgroundColor": "#89D2DC", // 和Header背景色统一，避免视觉割裂
        "barStyle": "light-content"
      }
    }
  }
}

4. 替换Dimensions.get('screen')为window #

screen包含状态栏、导航栏高度，改用window获取可用窗口高度，避免硬写高度导致布局错位：

// 替换原有代码
const { width, height } = Dimensions.get('window');

问题根源说明 #

• Expo Go调试时会自动处理安全区域适配，但构建APK时必须显式添加SafeAreaProvider，否则react-native-safe-area-context无法正常工作。
• 顶部空白是系统状态栏预留空间，但你的布局未适配该区域，导致内容被向下挤压，顶部出现空白。

内容的提问来源于stack exchange，提问作者João Pedro Santos