React Native iOS端StatusBar背景色不生效问题求助

问题现象 #

• Android端状态栏背景色成功切换为深色
• iOS端状态栏背景色无变化，仅文字颜色正常切换

问题原因 #

iOS从iOS 11开始，系统默认状态栏为透明状态，StatusBar组件的backgroundColor属性仅对Android平台生效，在iOS上不会产生视觉效果。而barStyle属性控制的是状态栏文字/图标颜色，iOS和Android均支持，因此能正常切换。

解决方案 #

方案1：通过React Navigation配置导航栏背景色（推荐） #

由于你使用了createNativeStackNavigator，可直接在导航配置中设置导航栏背景色，iOS状态栏会自动继承该颜色，实现统一视觉效果：

import {NavigationContainer, useTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {View, Text, StatusBar, useColorScheme} from 'react-native';

const Home = () => {
  const {colors} = useTheme();
  const theme = useColorScheme();

  return (
    <>
      <StatusBar
        barStyle={theme === 'dark' ? 'light-content' : 'default'}
      />
      <View>
        <Text>Hello World!</Text>
      </View>
    </>
  );
};

const Stack = createNativeStackNavigator();
const App = () => {
  const { colors } = useTheme();
  const theme = useColorScheme();

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          // 配置导航栏背景色，iOS状态栏自动同步该颜色
          headerStyle: {
            backgroundColor: colors.background,
          },
          // 同步导航栏文字颜色与状态栏文字颜色
          headerTintColor: theme === 'dark' ? 'white' : 'black',
        }}
      >
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

若不需要显示导航栏，可隐藏导航栏并手动添加状态栏占位视图：

const Home = () => {
  const {colors} = useTheme();
  const theme = useColorScheme();
  const statusBarHeight = StatusBar.currentHeight;

  return (
    <>
      <StatusBar
        barStyle={theme === 'dark' ? 'light-content' : 'default'}
      />
      {/* 添加与状态栏等高的视图作为背景 */}
      <View style={{ height: statusBarHeight, backgroundColor: colors.background }} />
      <View>
        <Text>Hello World!</Text>
      </View>
    </>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // 隐藏默认导航栏
        }}
      >
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

方案2：使用react-native-safe-area-context适配安全区域 #

若需适配刘海屏等特殊设备，可借助react-native-safe-area-context获取精准的安全区域边距：

1. 安装依赖：

npm install react-native-safe-area-context
# 或
yarn add react-native-safe-area-context

2. 修改代码：

import {NavigationContainer, useTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {View, Text, StatusBar, useColorScheme} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

const Home = () => {
  const {colors} = useTheme();
  const theme = useColorScheme();
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
      <StatusBar
        barStyle={theme === 'dark' ? 'light-content' : 'default'}
      />
      <View style={{ flex: 1 }}>
        <Text>Hello World!</Text>
      </View>
    </SafeAreaView>
  );
};

const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

SafeAreaView会自动填充包括状态栏在内的安全区域背景色，同时确保内容不被状态栏遮挡。

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