React Native中如何让iPhone背景图显示在状态栏后方而非下方？

你的问题核心是组件层级与状态栏配置错误，导致背景图无法延伸到状态栏后方。按以下方式修改即可解决：

关键调整要点 #

• 将ImageBackground置于最外层，让它占据整个屏幕空间（包括状态栏区域）
• 仅保留原生StatusBar组件，设置translucent={true}和backgroundColor="transparent"，确保状态栏透明，让背景图能透出来
• 用SafeAreaView包裹页面内容（比如示例里的Hello World文本），避免内容被状态栏/底部导航栏遮挡，而非包裹背景图
• 背景图样式不用固定宽高，用flex:1实现自适应屏幕

修改后的完整代码 #

import React from "react";
import {
  View,
  Text,
  ImageBackground,
  StyleSheet,
  StatusBar,
} from "react-native";

import beachImage from "@/assets/meditation-images/beach.webp";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <>
      <StatusBar 
        backgroundColor="transparent" 
        translucent={true} 
        barStyle="light-content" 
      />
      <ImageBackground source={beachImage} style={styles.bgImage}>
        <SafeAreaView style={styles.safeArea}>
          <Text style={styles.text}>Hello World</Text>
        </SafeAreaView>
      </ImageBackground>
    </>
  );
};

const styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    resizeMode: "cover",
  },
  safeArea: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 30,
    fontWeight: "bold",
    textAlign: "center",
  },
});

export default App;

调整说明 #

• 外层ImageBackground加flex:1会自动铺满整个屏幕，包括状态栏所在的顶部区域
• StatusBar设置translucent={true}后，允许页面内容延伸到状态栏下方，同时状态栏的文字图标会保持在最上层
• SafeAreaView仅包裹内容，确保内容不会被状态栏、刘海或底部安全区遮挡，不影响背景图的显示范围
• 移除了多余的GeneralStatusBarColor组件，避免和原生StatusBar冲突，若需自定义状态栏样式，直接在原生StatusBar上配置即可

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