React Native Navigation v5 Android端多次点击返回触发多次返回问题咨询

嘿，这在Android端的React Navigation里是个超常见的小坑——毕竟Android不像iOS那样，在返回动画过程中会自动拦截点击，快速点返回按钮就会连续触发goBack()，导致一下子退好几页。咱们来聊聊除了lodash的once或者debounce之外，更靠谱的解决方案！

先说说现有方案的局限 #

• 用lodash.once：这个方法会让返回函数只能执行一次，之后再点完全没反应，显然不合理——用户本来就应该能正常多次返回，只是不能在一次返回过程中重复触发。
• 用lodash.debounce：得设个固定延迟（比如300ms），但不同设备的页面切换动画时长可能不一样，延迟设短了还是会出问题，设长了又会让正常的连续返回变得卡顿。

更优方案1：自定义带状态锁的返回函数（基础版） #

我们可以用React的useRef来维护一个“返回锁定”的状态，确保一次返回操作没完成前，不会触发下一次。实现起来很简单：

import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { useRef, useCallback } from 'react';

const useSafeGoBack = () => {
  const navigation = useNavigation();
  const isGoingBack = useRef(false);

  // 页面失去焦点时重置锁状态，避免回到页面后没法正常返回
  useFocusEffect(
    useCallback(() => {
      return () => {
        isGoingBack.current = false;
      };
    }, [])
  );

  const safeGoBack = useCallback(() => {
    if (!isGoingBack.current) {
      isGoingBack.current = true;
      navigation.goBack();
      // 这里的延迟可以根据实际动画时长调整，300ms基本能覆盖大多数场景
      setTimeout(() => {
        isGoingBack.current = false;
      }, 300);
    }
  }, [navigation]);

  return safeGoBack;
};

// 用法示例
const YourScreen = () => {
  const safeGoBack = useSafeGoBack();

  return (
    <Button title="返回" onPress={safeGoBack} />
  );
};

为啥这个方案更好？ #

• 灵活不僵硬：页面切换走了之后再回来，锁状态会自动重置，不会影响后续的正常返回操作。
• 只拦截无效点击：只有在一次返回的窗口期内才会拦截重复点击，用户正常的连续返回（比如退一页后稍等再点）完全不受影响。
• 无额外依赖：不用引入lodash，纯React原生API搞定，减少包体积。

更优方案2：监听导航状态自动解锁（精准版） #

如果觉得固定延迟不够精准，还可以通过监听导航状态的变化来自动解锁——这样能准确知道页面切换完成的时机，比硬设延迟靠谱多了：

import { useNavigation, useNavigationState } from '@react-navigation/native';
import { useRef, useCallback, useEffect } from 'react';

const useSafeGoBack = () => {
  const navigation = useNavigation();
  const isGoingBack = useRef(false);
  // 获取当前路由的key，路由变化时这个值会更新
  const currentRouteKey = useNavigationState(state => state.routes[state.index].key);

  // 路由变化说明返回操作完成，重置锁状态
  useEffect(() => {
    isGoingBack.current = false;
  }, [currentRouteKey]);

  const safeGoBack = useCallback(() => {
    if (!isGoingBack.current) {
      isGoingBack.current = true;
      navigation.goBack();
    }
  }, [navigation]);

  return safeGoBack;
};

这个方案完全跟着导航状态走，不管页面切换动画多长，都能在准确的时机解锁，适配所有场景，是最精准的实现方式。

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