Expo(React Native)安卓端状态栏不显示且顶部出现多余内边距

问题现象 #

• Expo Go运行安卓应用时：状态栏正常显示时钟、通知，状态栏与顶部图片无间距
• 安装预发布构建包后：状态栏消失，顶部出现不应有的多余内边距
• iOS端全场景表现符合预期，曾尝试Expo StatusBar组件未解决问题

问题根源 #

代码中手动给SafeAreaView设置paddingTop: Constants.statusBarHeight，在Expo Go环境中SafeAreaView的自动适配逻辑被弱化，但预发布构建包中SafeAreaView会严格适配系统安全区域，导致手动padding+SafeArea自动间距的重复叠加，同时状态栏被上层布局遮挡。

解决方案 #

1. 调整布局结构，移除重复间距设置

修改MainLayout代码，移除手动设置的paddingTop，并显式声明状态栏可见：

import React from 'react';
import { StyleSheet, SafeAreaView, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function MainLayout({ children }) {
    return (
        <>
            <StatusBar style="auto" /> {/* 强制状态栏可见，自动适配主题颜色 */}
            <SafeAreaView style={styles.screen}>
                <View style={styles.view}>
                    {children}
                </View>
            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        // 移除手动paddingTop，由SafeAreaView自动处理安全区域间距
    },
    view: {
        flex: 1,
    }
});

2. 可选：差异化适配（如需更精细控制）

如果需要针对安卓/iOS单独调整间距，可结合Platform模块：

import React from 'react';
import { StyleSheet, SafeAreaView, View, Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import Constants from "expo-constants";

export default function MainLayout({ children }) {
    return (
        <>
            <StatusBar style="auto" />
            <SafeAreaView style={styles.screen}>
                <View style={styles.view}>
                    {children}
                </View>
            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        // 仅iOS手动补充间距，安卓依赖SafeAreaView自动适配
        paddingTop: Platform.OS === 'ios' ? Constants.statusBarHeight : 0,
    },
    view: {
        flex: 1,
    }
});

3. 补充app.json配置（确保状态栏全局可见）

在项目根目录的app.json中添加安卓状态栏配置：

{
  "expo": {
    "androidStatusBar": {
      "visible": true,
      "translucent": true,
      "backgroundColor": "transparent"
    }
  }
}

内容的提问来源于stack exchange，提问作者Clément Baconnier