react-native中按返回键关闭应用重启后组件页面Status Bar不显示如何解决

核心原因 #

• 安卓端默认按返回键仅将应用退至后台，不会完全销毁进程，二次启动为后台恢复流程，不会触发首次启动的Status Bar初始化逻辑
• Status Bar配置代码仅在组件首次挂载时执行（如空依赖useEffect、componentDidMount生命周期），后台恢复时组件未重新挂载，配置逻辑不生效
• 原生层AndroidManifest.xml配置的全屏主题与JS层Status Bar设置冲突，后台恢复时原生配置优先级更高，覆盖JS层设置
• 0.60~0.64版本的React Native存在已知Status Bar状态缓存bug，应用切后台后hidden属性状态异常

修复方案 #

• 调整返回键退出逻辑：若需求为按返回键完全关闭应用，可通过BackHandler监听返回事件，调用BackHandler.exitApp()同时在原生主Activity中添加进程销毁逻辑，避免应用驻留后台
• 绑定Status Bar配置到应用前台激活状态：通过AppState监听应用状态，每次应用切回前台时重新设置Status Bar的显示状态、样式，参考代码：

import { StatusBar, AppState, BackHandler } from 'react-native';
import { useEffect, useRef } from 'react';

const RootComponent = () => {
  const appStateRef = useRef(AppState.currentState);

  useEffect(() => {
    // 首次启动初始化Status Bar
    StatusBar.setHidden(false);
    StatusBar.setBarStyle('dark-content');

    // 监听应用状态变化
    const appStateListener = AppState.addEventListener('change', (nextState) => {
      if (appStateRef.current.match(/inactive|background/) && nextState === 'active') {
        // 应用回到前台，重新刷新Status Bar配置
        StatusBar.setHidden(false);
        StatusBar.setBarStyle('dark-content');
      }
      appStateRef.current = nextState;
    });

    // 可选：监听返回键完全退出应用
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      BackHandler.exitApp();
      return true;
    });

    return () => {
      appStateListener.remove();
      backHandler.remove();
    };
  }, []);

  // 其余业务逻辑
};

• 检查原生主题配置：删除AndroidManifest.xml中主题下的android:windowFullscreen属性，避免和JS层配置冲突
• 若为版本bug，可升级React Native至0.65及以上稳定版，或使用第三方兼容Status Bar组件

效果参考 #

首次启动时Status Bar正常显示：

二次启动时Status Bar异常消失：

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