如何在React Native的GestureDetector中实现短按与长按多手势处理？

要同时实现点击和长按手势，你不能直接把手势数组传给GestureDetector的gesture属性，需要用Gesture.Race组合互斥手势，同时要避免TouchableOpacity和GestureDetector的触摸事件冲突，具体修改如下：

1. 组合互斥手势：使用Gesture.Race()包裹点击和长按手势，让两个手势竞争触发，长按触发后就不会再触发点击。
2. 替换TouchableOpacity：TouchableOpacity自身的触摸逻辑会和GestureDetector冲突，改用View并通过状态模拟按压时的透明度变化。

修改后的完整代码：

import React, { useState } from "react";
import { Image, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";

export function Button(props) {
  const [isPressed, setIsPressed] = useState(false);
  
  const tap = Gesture.Tap()
    .onBegin(() => setIsPressed(true))
    .onEnd(() => {
      setIsPressed(false);
      console.log("short tap");
    });

  const longPress = Gesture.LongPress()
    .onBegin(() => setIsPressed(true))
    .onEnd(() => {
      setIsPressed(false);
      console.log("long tap");
    });

  // 用Race组合手势，确保只有一个触发
  const combinedGesture = Gesture.Race([tap, longPress]);

  return (
    <GestureDetector gesture={combinedGesture}>
      <View 
        style={[
          props.style, 
          { opacity: isPressed ? 0.5 : 1 } // 模拟activeOpacity效果
        ]}
      >
        <Image source={props.image} />
      </View>
    </GestureDetector>
  );
}

关键说明 #

• Gesture.Race([tap, longPress])：将两个手势组合为竞争关系，当长按触发时，点击手势会被取消，避免同时触发两个事件。
• 移除TouchableOpacity：它的触摸事件会和手势处理器冲突，导致手势不生效或异常。通过useState控制opacity来模拟按压反馈。
• 手势的onBegin和onEnd：用来更新按压状态，实现和activeOpacity一样的视觉反馈。

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