React Navigation侧边栏快速点击菜单未关闭问题咨询

嘿，这个问题我之前做项目时也踩过坑——快速点侧边栏菜单，页面确实切过去了，但抽屉就那么敞着，体验确实不太好，而且你说NativeBase的示例也有这问题，说明这是个默认实现里的小疏漏，不是你代码的问题～

其实核心原因很简单：默认情况下，this.props.navigation.navigate(route)只会处理页面导航的逻辑，并不会自动触发侧边栏（抽屉）的关闭动作，尤其是快速点击时，事件处理的顺序可能导致抽屉的关闭指令没被正确执行。

给你几个靠谱的解决方法，按需求选就行：

方法一：点击后先关抽屉再导航 #

这是最直接的方案，在菜单项的点击事件里，先调用抽屉关闭方法，再执行导航：

// 类组件写法
handleMenuTap = (routeName) => {
  // 先关闭抽屉
  this.props.navigation.closeDrawer();
  // 再跳转到目标页面
  this.props.navigation.navigate(routeName);
}

// 函数组件（React Navigation v5+）写法
import { useNavigation } from '@react-navigation/native';

const SidebarMenu = () => {
  const navigation = useNavigation();

  const handleMenuTap = (routeName) => {
    navigation.closeDrawer();
    navigation.navigate(routeName);
  };

  // ... 菜单渲染逻辑
}

方法二：用dispatch组合动作（更稳定） #

如果担心快速点击时事件顺序出问题，可以用navigation.dispatch来按顺序发送抽屉关闭和导航的动作，确保两个操作都能被执行：

// 类组件写法，需要引入对应的Action
import { NavigationActions, DrawerActions } from 'react-navigation';

handleMenuTap = (routeName) => {
  // 先发送关闭抽屉的动作
  this.props.navigation.dispatch(DrawerActions.closeDrawer());
  // 再发送导航动作
  const navigateAction = NavigationActions.navigate({ routeName });
  this.props.navigation.dispatch(navigateAction);
}

额外提示：避免重复点击 #

如果想彻底解决快速重复点击导致的其他问题（比如多次导航），还可以给点击事件加个节流处理，比如用lodash.throttle：

import throttle from 'lodash.throttle';

// 在组件初始化时绑定节流后的事件处理函数
componentDidMount() {
  this.throttledHandleMenuTap = throttle(this.handleMenuTap, 500);
}

// 菜单点击时调用节流后的方法
onPress={() => this.throttledHandleMenuTap('TargetRoute')}

这样不仅能确保抽屉关闭，还能防止短时间内多次点击导致的重复导航问题。

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