如何禁用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
相关产品推荐
相关产品推荐

