如何修改Expo开发的React Native Android动态导航栏背景颜色

针对你用Expo 49开发React Native应用时，Android 13真机上无法修改系统导航栏背景色的问题，react-native-safe-area-context仅用于处理内容安全区域适配，无法直接修改系统导航栏样式，需要使用Expo官方提供的系统UI工具来解决：

步骤1：确保安装expo-system-ui #

如果项目中未安装该依赖，执行命令：

npx expo install expo-system-ui

步骤2：页面级动态修改导航栏样式 #

在登录页面组件中，通过useEffect调用API修改导航栏背景色，同时可设置图标明暗风格：

import * as SystemUI from 'expo-system-ui';
import { useEffect } from 'react';

export default function LoginScreen() {
  useEffect(() => {
    const configureNavigationBar = async () => {
      // 设置导航栏背景色
      await SystemUI.setBackgroundColorAsync('#ff0000'); // 替换为你需要的颜色值
      // 设置导航栏图标样式（dark/light），适配背景色
      await SystemUI.setNavigationBarStyleAsync('light');
    };

    configureNavigationBar();
  }, []);

  // 你的登录页面内容...
}

步骤3：全局配置（可选） #

如果需要所有页面统一导航栏样式，可在app.json中添加全局配置：

{
  "expo": {
    "android": {
      "navigationBar": {
        "backgroundColor": "#ff0000",
        "barStyle": "light-content"
      }
    }
  }
}

注意事项 #

• Android 13的Material You动态颜色功能可能会覆盖自定义设置，上述API调用会自动禁用当前页面的动态颜色适配
• 需在真机上测试，部分模拟器的系统UI渲染可能与真机有差异
• 若使用EAS Build打包，无需额外配置，依赖会自动集成

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