React Native Expo背景无法覆盖iPhone刘海屏问题求助

DevOps 小满

2026-6-21

解决React Native Expo中iPhone刘海区域背景未覆盖问题

针对iPhone 13刘海区域出现白色未被背景覆盖的问题，可通过以下步骤解决：

1. 配置状态栏让内容延伸至刘海区域

在AppHome组件中添加Expo状态栏配置，设置为半透明并允许内容延伸到状态栏下方，同时让渐变层完全覆盖屏幕：

import { StatusBar } from 'expo-status-bar';

const AppHome = () => {
  return (
    <>
      <StatusBar style="light" translucent backgroundColor="transparent" />
      <LinearGradient
        colors={["#9C51B6", "#5946B2"]}
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        <Text style={{ color: "white" }}>My App's Content</Text>
      </LinearGradient>
    </>
  );
};

2. 移除导航容器的默认内边距

在AuthenticationStack.Navigator的screenOptions中添加contentStyle，清除默认的顶部内边距和背景色：

<AuthenticationStack.Navigator
  screenOptions={{ 
    headerShown: false,
    contentStyle: {
      paddingTop: 0,
      backgroundColor: 'transparent'
    }
  }}
>
  <AuthenticationStack.Screen
    name="Home Screen"
    component={AppHome}
  />
</AuthenticationStack.Navigator>

3. 全局状态栏配置（可选）

若希望所有页面统一生效，可在项目根目录的app.json中添加iOS状态栏配置：

{
  "expo": {
    "ios": {
      "statusBar": {
        "style": "light",
        "translucent": true,
        "backgroundColor": "transparent"
      }
    }
  }
}