React Native状态栏颜色异常：仅能切换一次颜色问题求助

这个问题我之前开发React Native应用时也碰到过，其实核心原因和React Native的StatusBar特性以及导航组件的缓存机制有关：

问题根源 #

• React Native的<StatusBar>是全局单例组件，它的配置会直接覆盖之前的所有状态栏设置。
• 当使用React Navigation这类导航库时，默认会缓存已访问过的页面组件（比如Stack Navigator的页面缓存）。当你从页面B切回页面A时，页面A的组件并没有重新触发渲染，所以它内部的<StatusBar>不会再次更新，导致状态栏停留在页面B的配置上。

具体解决办法 #

方法1：利用React Navigation的屏幕生命周期钩子（推荐）

通过监听屏幕的focus事件，每次页面获得焦点时手动设置状态栏，确保切回页面时都会触发更新：

如果是函数组件，使用useFocusEffect钩子：

import { StatusBar } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import React, { useCallback } from 'react';

function YourAlarmScreen() {
  useFocusEffect(
    useCallback(() => {
      // 设置当前页面的状态栏参数
      StatusBar.setBackgroundColor(S.COLOR_STATUS_BAR_DARK);
      StatusBar.setBarStyle('dark-content');
      StatusBar.setTranslucent(false);

      // 可选：离开页面时恢复默认状态栏（按需添加）
      return () => {
        // StatusBar.setBackgroundColor(你的默认状态栏颜色);
      };
    }, [])
  );

  return (
    <View style={theme.container}>
      {/* 这里可以移除组件内的<StatusBar>标签 */}
      {this.props.isFetching || this.props.isSubmitting ? 
        <Spinner /> : 
        <View style={theme.container}> { this.renderAlarms() } </View> 
      }
    </View>
  );
}

如果是类组件，使用导航的事件监听：

import { StatusBar } from 'react-native';

class YourAlarmScreen extends React.Component {
  componentDidMount() {
    // 监听屏幕聚焦事件
    this.focusListener = this.props.navigation.addListener('focus', () => {
      StatusBar.setBackgroundColor(S.COLOR_STATUS_BAR_DARK);
      StatusBar.setBarStyle('dark-content');
      StatusBar.setTranslucent(false);
    });
  }

  componentWillUnmount() {
    // 移除监听避免内存泄漏
    this.focusListener();
  }

  render() {
    return (
      <View style={theme.container}>
        {this.props.isFetching || this.props.isSubmitting ? 
          <Spinner /> : 
          <View style={theme.container}> { this.renderAlarms() } </View> 
        }
      </View>
    );
  }
}

方法2：给<StatusBar>添加动态Key强制更新

如果不想修改太多代码，可以给组件内的<StatusBar>绑定一个和屏幕聚焦状态相关的key，这样当页面聚焦时，Key变化会触发<StatusBar>重新渲染：

render() {
  // 获取当前页面是否处于聚焦状态
  const isFocused = this.props.navigation.isFocused();
  
  return (
    <View style={theme.container}>
      <StatusBar
        key={isFocused} // 关键：用聚焦状态作为Key，强制重新渲染
        translucent={false}
        backgroundColor={S.COLOR_STATUS_BAR_DARK}
        barStyle="dark-content"
      />
      {this.props.isFetching || this.props.isSubmitting ? 
        <Spinner /> : 
        <View style={theme.container}> { this.renderAlarms() } </View> 
      }
    </View>
  );
}

方法3：用React Navigation的ScreenOptions统一配置（最简洁）

如果每个页面的状态栏配置是固定的，直接在导航器中为每个屏幕单独设置screenOptions，React Navigation会自动在屏幕切换时更新状态栏：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="AlarmScreen"
        component={YourAlarmScreen}
        options={{
          statusBarColor: S.COLOR_STATUS_BAR_DARK,
          statusBarStyle: 'dark-content',
          statusBarTranslucent: false,
        }}
      />
      <Stack.Screen
        name="OtherScreen"
        component={OtherScreen}
        options={{
          statusBarColor: '#ffffff',
          statusBarStyle: 'light-content',
        }}
      />
    </Stack.Navigator>
  );
}

总结 #

首次切换状态栏有效是因为新页面组件挂载时，<StatusBar>的配置会被应用；但后续切回缓存页面时，组件没有重新渲染，导致<StatusBar>不会更新。上面任意一种方法都能解决这个问题，推荐优先使用方法1或方法3，代码更规范且易于维护。

内容的提问来源于stack exchange，提问作者Wesley Van De Voorde