React Native中StatusBar背景色不匹配及无法隐藏问题求助

问题详情 #

花费数小时尝试实现全屏视图、隐藏状态栏但毫无进展，尝试过以下方案均无效：

• 尝试隐藏状态栏（未成功）
• 使用 translucent、barStyle 等属性调整样式
• 将 SafeAreaView 替换为 View

始终无法去除Android默认施加的样式，例如设置状态栏颜色为black时，状态栏始终显示淡化版黑色，无法像其他应用或游戏那样彻底隐藏状态栏。

代码片段 #

import { SafeAreaView, StatusBar, View } from "react-native"
import { CalculadoraScreen } from "./src/screens/CalculadoraScreen";
import { style } from './src/theme/appTheme';

const App = () => {
  return (
    <SafeAreaView style={{
      ...style.background,
      }}>
      <StatusBar 
        backgroundColor={style.background.backgroundColor}
        // translucent={true}
        // hidden={true}
        barStyle={'light-content'}
      />
      <CalculadoraScreen/>
    </SafeAreaView>
  )
}

export default App;

环境信息 #

• 设备：Google Pixel 4a（实体机）
• 系统：Android 13
• React Native CLI依赖：

"dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.1"
  }

解决方法 #

1. 调整 React Native 代码配置 #

移除SafeAreaView（它会强制预留状态栏空白），将根容器改为View并设置flex:1，同时正确配置StatusBar属性：

import { StatusBar, View } from "react-native"
import { CalculadoraScreen } from "./src/screens/CalculadoraScreen";
import { style } from './src/theme/appTheme';

const App = () => {
  return (
    <View style={{
      ...style.background,
      flex: 1
    }}>
      <StatusBar 
        hidden={true}
        translucent={true}
        barStyle={'light-content'}
      />
      <CalculadoraScreen/>
    </View>
  )
}

export default App;

2. 修改 Android 原生样式文件 #

Android 13 对全屏模式有严格限制，需修改android/app/src/main/res/values/styles.xml中的AppTheme节点：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 保留原有属性，添加以下内容 -->
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowTranslucentStatus">false</item>
    </style>
</resources>

如果应用有闪屏页，需同步修改闪屏对应的主题配置，确保闪屏页也启用全屏模式。

3. 动态切换全屏（可选） #

若需在运行时切换状态栏显示/隐藏，可在组件中使用useEffect调用StatusBar.setHidden：

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

const App = () => {
  useEffect(() => {
    // 组件挂载时隐藏状态栏，带淡入淡出动画
    StatusBar.setHidden(true, 'fade');
    
    // 组件卸载时恢复状态栏
    return () => StatusBar.setHidden(false, 'fade');
  }, []);

  // ... 其余代码
}

注意事项 #

• 修改原生配置后必须重新编译Android项目（执行npx react-native run-android）
• 确保根View的flex:1属性已设置，否则无法占满整个屏幕
• 若使用第三方导航库，需检查导航库是否有额外的状态栏配置冲突

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