React Native Expo中Modal弹出时Android导航栏颜色被覆盖问题

问题根源 #

Modal弹出时，Expo会自动根据Modal内容的亮色/暗色主题调整系统导航栏颜色，导致手动设置的颜色被覆盖。另外异步设置时机不对，就会出现“先显示目标色再被覆盖”的情况。

解决步骤 #

1. 监听Modal显示状态，强制设置导航栏颜色

用useEffect监听Modal的visible状态，在Modal显示时立刻设置导航栏颜色，同时禁用自动适配：

import { useEffect } from 'react';
import * as NavigationBar from 'expo-navigation-bar';
import { Modal } from 'react-native';

export default function YourModalComponent({ visible, onClose }) {
  useEffect(() => {
    const updateNavColor = async () => {
      if (visible) {
        // 关闭自动适配，强制使用手动设置的颜色
        await NavigationBar.setBehaviorAsync('inset');
        // 设置目标导航栏背景色
        await NavigationBar.setBackgroundColorAsync('#2AA6BF');
        // 可选：调整导航栏图标颜色，确保和背景对比明显
        // await NavigationBar.setButtonStyleAsync('light');
      } else {
        // Modal关闭后恢复全局导航栏颜色
        await NavigationBar.setBackgroundColorAsync('#2AA6BF');
      }
    };

    updateNavColor();
  }, [visible]);

  return (
    <Modal 
      visible={visible} 
      animationType="slide"
      // 避免状态栏穿透影响颜色显示
      statusBarTranslucent={false}
    >
      <ExampleModal onClose={onClose} />
    </Modal>
  );
}

2. 排查全局配置冲突

暂时注释app.json中的全局状态栏配置，测试是否和Modal内的动态设置冲突：

// app.json 中先注释，验证效果
// "androidStatusBar": { "backgroundColor": "#2AA6BF" },

3. 检查Modal内部的主题逻辑

如果ExampleModal组件里有自动切换亮色/暗色模式的逻辑，比如使用了useColorScheme，要确保它不会触发系统导航栏的自动颜色调整，必要时手动覆盖这部分逻辑。

关键提示 #

• 必须监听visible状态来触发设置，确保Modal显示时立即执行，避免异步延迟导致被Expo的自动调整覆盖。
• setBehaviorAsync('inset')是核心，它会关闭Expo自动适配导航栏颜色的逻辑，让手动设置生效。
• 导航栏图标颜色要和背景色匹配，比如背景色是深色的#2AA6BF，就设置图标为亮色light，保证可读性。

内容的提问来源于stack exchange，提问作者Spencer S.