React Native应用顶部存在留白，如何实现全屏显示？

方法1：调整SafeAreaView的安全区域设置 #

如果你的应用根容器用了SafeAreaView，它会默认保留系统安全区域（比如顶部状态栏位置），可以通过edges属性指定忽略不需要的安全区域：

import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
  {/* 你的应用内容 */}
</SafeAreaView>

edges={['right', 'left']}表示只保留左右两侧的安全区域，顶部和底部的留白会被移除。

方法2：隐藏状态栏 #

如果不需要显示状态栏，直接隐藏即可让应用占满整个屏幕：

全局隐藏（入口文件中设置） #

import { StatusBar, useEffect } from 'react-native';

function App() {
  useEffect(() => {
    StatusBar.setHidden(true);
  }, []);

  return (
    {/* 应用内容 */}
  );
}

单个页面隐藏 #

在目标页面的组件中调用StatusBar.setHidden(true)即可，离开页面时可以再调用StatusBar.setHidden(false)恢复。

方法3：让内容延伸到状态栏下方（保留状态栏） #

如果需要保留状态栏，但希望应用内容填充到状态栏区域：

import { StatusBar, useEffect, View } from 'react-native';

function App() {
  useEffect(() => {
    // 设置状态栏为透明
    StatusBar.setTranslucent(true);
    // 根据背景色调整状态栏文字颜色，避免看不清
    StatusBar.setBarStyle('light-content'); // 浅色文字，对应深色背景；用'default'对应浅色背景
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* 应用内容会延伸到状态栏下方 */}
    </View>
  );
}

方法4：Android原生配置调整 #

修改android/app/src/main/res/values/styles.xml中的AppTheme，添加以下属性：

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

这会让应用延伸覆盖状态栏和刘海屏区域。

方法5：iOS原生配置调整 #

在ios/[你的项目名称]/Info.plist中添加以下配置：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIStatusBarHidden</key>
<true/>

此配置会让iOS系统默认隐藏状态栏，应用直接全屏显示。

内容的提问来源于stack exchange，提问作者Samarth Kadam