React Native Android 11状态栏背景色修改失效问题求助

1. 适配Android版本差异逻辑 #

Android 10（API 29）及以上系统，状态栏背景色设置受沉浸式模式和EdgeToEdge配置影响，直接调用StatusBar.setBackgroundColor可能失效，需补充适配代码：

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

useEffect(() => {
  if (Platform.OS === 'android') {
    if (Platform.Version >= 29) {
      StatusBar.setBackgroundColor('#2196F3');
      StatusBar.setBarStyle('light-content');
      // 关闭透明模式，确保背景色生效
      StatusBar.setTranslucent(false);
    } else {
      // 低版本直接设置即可
      StatusBar.setBackgroundColor('#2196F3');
      StatusBar.setBarStyle('light-content');
    }
  }
}, []);

2. 修改Android原生样式（最稳定方案） #

JS层设置无效时，直接修改Android项目的样式文件：

基础版本（res/values/styles.xml） #

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 状态栏背景色 -->
        <item name="colorPrimaryDark">#2196F3</item>
        <!-- 移除状态栏默认阴影 -->
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Android 10+ 适配（res/values-v29/styles.xml） #

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">#2196F3</item>
        <!-- 禁用状态栏透明，强制显示背景色 -->
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:statusBarColor">@color/colorPrimaryDark</item>
    </style>
</resources>

修改后执行cd android && ./gradlew clean，再重新运行项目。

3. 处理React Navigation的覆盖问题 #

如果使用React Navigation，导航容器会默认覆盖状态栏设置，需在容器或屏幕组件中配置：

全局容器配置 #

import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer
  theme={{
    colors: {
      primary: '#2196F3', // 状态栏背景色继承该值
    },
  }}
>
  {/* 导航栈内容 */}
</NavigationContainer>

单个屏幕单独设置 #

import { useLayoutEffect } from 'react';
import { StatusBar } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: { backgroundColor: '#2196F3' },
      headerStatusBarHeight: StatusBar.currentHeight,
    });
    StatusBar.setBackgroundColor('#2196F3');
    StatusBar.setBarStyle('light-content');
  }, [navigation]);

  return {/* 屏幕内容 */};
}

4. 清除缓存解决异常 #

缓存导致的设置不生效，执行以下命令重置：

# 清除RN缓存
npm start -- --reset-cache
# 清除Android构建缓存
cd android && ./gradlew clean
# 重新启动项目
npx react-native run-android

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