You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何禁用Drawer边缘滑动打开?设置swipeEnabled仍无效

解决Drawer边缘滑动误触问题

方案一:全局禁用Drawer滑动

把swipeEnabled: false配置在Drawer.Navigator的screenOptions中,确保所有页面都无法通过滑动打开Drawer:

<Drawer.Navigator 
  screenOptions={{
    swipeEdgeWidth: 0,
    swipeEnabled: false, // 全局禁用滑动触发Drawer
  }}            
  drawerContent={(props) => <Menu props={props}  />}>
  {/* 你的Drawer.Screen代码保持不变 */}
</Drawer.Navigator>

方案二:仅在横向列表页面禁用

如果只需要在特定页面(比如横向滚动的列表页)禁用滑动,可通过页面焦点事件动态控制Drawer的滑动状态:
修改对应的Stack.Screen配置:

<Stack.Screen
  name='purchaseOrdersList'
  component={PurchaseOrdersList}
  options={({ navigation }) => ({
    header: () => null,
    listeners: {
      focus: () => {
        // 获取Drawer导航器并禁用滑动
        navigation.getParent()?.setOptions({ swipeEnabled: false });
      },
      blur: () => {
        // 离开页面时恢复滑动(根据需求选择是否保留)
        navigation.getParent()?.setOptions({ swipeEnabled: true });
      },
    },
  })}
/>

注意事项

  • 确认你使用的是React Navigation v6及以上版本,swipeEnabled和swipeEdgeWidth是该版本的属性,旧版本需使用gestureEnabled替代。

内容的提问来源于stack exchange,提问作者user28353622

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.16 04:17:18