React Native（Expo）使用SafeAreaView后状态栏仍为黑色的问题咨询

核心原因 #

你之前修改状态栏无效，大概率是用了React Native自带的StatusBar组件——iOS系统下这个组件不支持设置状态栏背景色，必须使用Expo提供的专用组件或全局配置才能生效。

解决方案1：使用expo-status-bar组件（页面级配置） #

1. 确保项目已安装expo-status-bar（Expo初始化项目默认自带，若缺失可执行npx expo install expo-status-bar）
2. 修改代码，导入并添加Expo的StatusBar组件：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
// 导入Expo专属的StatusBar组件
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <SafeAreaProvider>
      {/* 设置状态栏背景色为灰色，文字样式为黑色（dark对应深色文字） */}
      <StatusBar backgroundColor="grey" style="dark" />
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Notice that the status bar has light text!  </Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#000',
  },
});

解决方案2：全局配置（app.json） #

如果希望整个应用的状态栏统一样式，可在项目根目录的app.json中修改：

{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    // 其他原有配置...
    "ios": {
      "statusBar": {
        "backgroundColor": "grey",
        "style": "dark"
      }
    },
    // 若需要同步修改安卓状态栏，可添加以下配置
    "android": {
      "statusBar": {
        "backgroundColor": "grey",
        "barStyle": "dark-content"
      }
    }
  }
}

补充说明 #

• style="dark"对应状态栏文字为黑色，若后续改用深色背景，可改为style="light"使用白色文字
• SafeAreaView会自动避开状态栏区域，无需担心内容被遮挡

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