使用EAS构建APK时状态栏异常显示，如何隐藏？

问题场景 #

使用Expo SDK 46、expo-cli 6.0.5和eas 2.0.1开发应用时，在Expo Go或安卓模拟器中测试看不到状态栏，但通过EAS构建为APK后，绿色状态栏出现并导致整个应用布局下移：

解决方案 #

1. 通过app.config.js配置全局状态栏 #

在app.config.js的expo.android节点下添加状态栏相关配置，强制隐藏状态栏并处理布局适配：

export default {
  expo: {
    // 其他原有配置...
    android: {
      package: "***",
      adaptiveIcon: {
        foregroundImage: "./assets/adaptive-icon.png",
        backgroundColor: "#72e292"
      },
      permissions: [],
      // 添加以下状态栏配置
      statusBar: {
        hidden: true, // 隐藏状态栏
        translucent: true, // 允许应用内容延伸到状态栏区域，避免布局下移
        backgroundColor: "transparent" // 确保状态栏背景透明
      }
    },
    // 其他原有配置...
  }
}

2. 用expo-status-bar组件在代码中控制状态栏 #

如果全局配置不生效，可直接在应用根组件中使用expo-status-bar组件强制隐藏状态栏：

若未安装依赖（Expo SDK 46默认包含该库，缺失时可执行）：

npx expo install expo-status-bar

在根组件（如App.js）中添加：

import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* 你的应用内容组件 */}
      <StatusBar hidden={true} />
    </View>
  );
}

3. 修复布局偏移问题 #

如果配置后仍存在布局下移，可在根View中明确设置内边距为0，确保内容从屏幕顶部开始：

<View style={{ flex: 1, paddingTop: 0, marginTop: 0 }}>
  {/* 应用内容 */}
</View>

原因说明 #

Expo Go与原生APK构建环境存在差异：Expo Go默认对状态栏做了隐藏或适配处理，而原生APK构建会遵循Android系统的默认状态栏行为，因此需要通过配置或代码明确控制状态栏显示状态。

内容的提问来源于stack exchange，提问作者González López David