如何禁用React Navigation抽屉点击遮罩关闭或移除遮罩

方案1：禁止点击遮罩关闭抽屉 #

如果只是不想让点击遮罩触发抽屉关闭，无需移除遮罩，直接配置组件的遮罩点击禁用项即可。以React Navigation抽屉组件为例，设置overlayPressEnabled为false：

<Drawer.Navigator
  screenOptions={{
    drawerStyle: { /* 自定义抽屉宽度等样式 */ },
    overlayPressEnabled: false // 核心配置：点击遮罩不再关闭抽屉
  }}
>
  {/* 你的页面路由组件 */}
</Drawer.Navigator>

方案2：彻底移除遮罩 #

要是想完全去掉遮罩，让屏幕上的按钮能直接被点击，不同UI库的配置方式略有不同：

React Navigation 实现 #

通过overlayStyle直接隐藏遮罩元素：

<Drawer.Navigator
  screenOptions={{
    overlayStyle: { display: 'none' }, // 彻底隐藏遮罩
    drawerStyle: { width: '80%' } // 保持抽屉原有宽度，不占满屏幕
  }}
>
  {/* 你的页面路由组件 */}
</Drawer.Navigator>

Ant Design Mobile 实现 #

如果用的是AntD Mobile的Drawer组件，直接设置mask={false}即可关闭遮罩：

<Drawer
  open={true}
  mask={false} // 关闭遮罩
  drawerStyle={{ width: '80%' }}
>
  {/* 抽屉内部内容 */}
</Drawer>

以上方案都能实现你要的效果：抽屉保持打开状态时，屏幕上的按钮可以正常被点击，不会被遮罩拦截。

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