React Native中调用Modal时无法隐藏Android导航栏问题求助

方案1：使用导航栏控制库手动切换状态 #

借助第三方库直接在 Modal 显示/隐藏时控制导航栏的显示状态，这是最直接的解决方案。

1. 安装依赖：

npm install react-native-navigation-bar-color --save
# 或使用 yarn
yarn add react-native-navigation-bar-color

2. 在 Modal 组件中添加控制逻辑：

import { Modal, View, Text, Button } from 'react-native';
import changeNavigationBarColor from 'react-native-navigation-bar-color';

const CustomModal = ({ visible, onClose }) => {
  // Modal 显示时隐藏导航栏
  const handleShow = async () => {
    // 参数说明：导航栏颜色、是否隐藏图标、是否完全进入沉浸式模式
    await changeNavigationBarColor('transparent', true, true);
  };

  // Modal 关闭时恢复导航栏
  const handleHide = async () => {
    // 替换为你应用原本的导航栏颜色
    await changeNavigationBarColor('#121212', false);
  };

  return (
    <Modal
      visible={visible}
      onShow={handleShow}
      onHide={handleHide}
      animationType="fade"
      transparent
      statusBarTranslucent={true}
    >
      <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
        <View style={{ backgroundColor: '#fff', padding: 24, borderRadius: 12 }}>
          <Text>弹窗内容</Text>
          <Button title="关闭" onPress={onClose} style={{ marginTop: 16 }} />
        </View>
      </View>
    </Modal>
  );
};

export default CustomModal;

方案2：用自定义 View 替代原生 Modal #

原生 Modal 可能触发 Android 系统 UI 重置，用绝对定位的 View 模拟 Modal 可规避这个问题：

import { View, Text, Button, TouchableOpacity, StyleSheet, useEffect } from 'react-native';
import changeNavigationBarColor from 'react-native-navigation-bar-color';

const CustomModal = ({ visible, onClose }) => {
  useEffect(() => {
    if (visible) {
      // 显示时隐藏导航栏
      changeNavigationBarColor('transparent', true, true);
    } else {
      // 隐藏时恢复导航栏
      changeNavigationBarColor('#121212', false);
    }
  }, [visible]);

  if (!visible) return null;

  return (
    <TouchableOpacity style={styles.overlay} onPress={onClose} activeOpacity={1}>
      <TouchableOpacity style={styles.content} onPress={() => {}} activeOpacity={1}>
        <Text>自定义弹窗内容</Text>
        <Button title="关闭" onPress={onClose} style={{ marginTop: 16 }} />
      </TouchableOpacity>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    width: '85%',
    backgroundColor: '#fff',
    padding: 24,
    borderRadius: 12,
  },
});

export default CustomModal;

方案3：修改 Android 原生配置（全局/特定页面） #

如果需要全局或特定页面保持全屏状态，可修改 Android 原生主题：

1. 在 android/app/src/main/res/values/styles.xml 中添加全屏主题：

<style name="FullScreenModalTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

2. 在 AndroidManifest.xml 中，给对应的 Activity 设置该主题（若为单独弹窗 Activity），或通过 React Native 原生模块动态切换主题（适合复杂场景）。

注意事项 #

• 确保 statusBarTranslucent 属性设为 true，让内容可延伸至状态栏下方
• 部分 Android 机型需额外设置 SYSTEM_UI_FLAG_IMMERSIVE_STICKY 标志，避免导航栏触摸时重新显示
• 测试时注意不同 Android 版本的兼容性（Android 10+ 对导航栏控制逻辑有变化）

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