如何区分本机反应中的双击和单击？

Question

我需要在视图上单击和双击执行不同的操作。双击时我需要喜欢该图像，就像 Instagram 双击体验一样。单击一次我需要打开一个模式。对于双击，我使用了 TapGestureHandler ，效果非常好

 <TapGestureHandler
          ref={this.doubleTapRef}
          maxDelayMs={200}
          onHandlerStateChange={this.onProductImageDoubleTap}
          numberOfTaps={2}
        >
         <SomeChildComponent ...

但是当我添加任何 Touchable 来检测单击时

 <TouchableWithoutFeedback onPress={this.imageTapped}>

双击该this.imageTapped函数会与 一起被调用两次this.onProductImageDoubleTap。当两次点击快速连续完成时，有什么方法可以取消对可触摸的点击

Answer 1

最好的解决方案是不使用状态，因为设置状态是异步的。在 Android 上对我来说就像一个魅力！

let lastPress = 0;
const functionalComp = () => {
    const onDoublePress = () => {
        const time = new Date().getTime();
        const delta = time - lastPress;

        const DOUBLE_PRESS_DELAY = 400;
        if (delta < DOUBLE_PRESS_DELAY) {
            // Success double press
            console.log('double press');

        }
        lastPress = time;
    };

    return <View
        onStartShouldSetResponder =
        {(evt) => onDoublePress()}>
     </View>
}

Answer 2

2022年更新

这是一个高性能的原生解决方案，没有任何JS线程阻塞计算！ 这里还有更多提示

const tap = Gesture.Tap()
  .numberOfTaps(2)
  .onStart(() => {
    console.log('Yay, double tap!');
  });

return (
    <GestureDetector gesture={tap}>
      {children}
    </GestureDetector>
);

Answer 3

最好的解决方案是使用react-native-gesture-handler

https://github.com/software-mansion/react-native-gesture-handler

这是我的解决方案 -

import {State, TapGestureHandler} from 'react-native-gesture-handler';
export const DoubleTap = ({children}: any) => {
  const doubleTapRef = useRef(null);

  const onSingleTapEvent = (event: any) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      console.log("single tap 1");
    }
  };

  const onDoubleTapEvent = (event: any) => {
    if (event.nativeEvent.state === State.ACTIVE) {
       console.log("double tap 1");
    }
  };

  return (
    <TapGestureHandler
      onHandlerStateChange={onSingleTapEvent}
      waitFor={doubleTapRef}>
      <TapGestureHandler
        ref={doubleTapRef}
        onHandlerStateChange={onDoubleTapEvent}
        numberOfTaps={2}>
        {children}
      </TapGestureHandler>
    </TapGestureHandler>
  );
};

现在我们将组件包装在需要检测双击和单击的位置：-

 <DoubleTap>
    <View>
      ...some view and text
    </View>
 </DoubleTap>