React Native中如何避免TouchableOpacity被快速多次点击触发重复事件

以下是几种落地性很强的解决方案，可根据你的业务场景选择：

1. 提交状态拦截（最适合表单/接口提交场景） #

通过状态标记当前是否处于提交过程中，提交未完成时直接拦截后续点击，同时给用户明确的交互反馈：

import { useState, useCallback } from 'react';
import { TouchableOpacity, Text } from 'react-native';

const SubmitBtn = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const submitHandler = useCallback(async () => {
    // 提交中直接忽略点击
    if (isSubmitting) return;
    try {
      setIsSubmitting(true);
      // 你的业务逻辑，比如表单提交、接口请求等
      await submitFormApi();
    } finally {
      // 无论请求成功失败都重置状态，避免后续无法点击
      setIsSubmitting(false);
    }
  }, [isSubmitting]);

  return (
    <TouchableOpacity 
      onPress={submitHandler}
      disabled={isSubmitting}
    >
      <Text>{isSubmitting ? '提交中...' : '提交'}</Text>
    </TouchableOpacity>
  )
}

这个方案的优势是逻辑和状态同步，不会出现用户点击后无反馈的情况，同时完全避免重复提交请求的问题。

2. 通用防重复点击组件（适合全项目复用） #

封装自带防抖能力的TouchableOpacity组件，侵入性极低，原有代码只需替换组件名即可生效：

import { useRef } from 'react';
import { TouchableOpacity } from 'react-native';

const AntiDoubleTouch = ({ 
  onPress, 
  coolDown = 1000, // 自定义冷却时间，默认1秒
  children,
  ...props 
}) => {
  const lastClickTime = useRef(0);

  const handlePress = () => {
    const currentTime = Date.now();
    // 冷却时间内的点击直接拦截
    if (currentTime - lastClickTime.current < coolDown) return;
    lastClickTime.current = currentTime;
    onPress?.();
  };

  return (
    <TouchableOpacity {...props} onPress={handlePress}>
      {children}
    </TouchableOpacity>
  );
};

// 使用示例
// <AntiDoubleTouch onPress={yourClickHandler} coolDown={1500}>
//   <Text>点击按钮</Text>
// </AntiDoubleTouch>

这个方案适合页面内大量按钮需要防重复点击的场景，不用每个页面单独写拦截逻辑。

注意事项 #

• 冷却时间建议设置在500ms~1500ms区间，过长会影响正常操作体验，过短无法有效拦截误触。
• 如果需要自定义禁用状态的样式，可以直接修改disabled状态下的style属性，覆盖TouchableOpacity默认的透明度降低效果。

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