2023年useAnimatedGestureHandler在react-native-gesture-handler中是否仍有效及组合手势问题

我关注react-native-gesture-handler的正确使用方式，官方文档指出Gesture Handlers已废弃，应使用GestureDetector。我需要组合手势，尝试编写了如下代码：

const gesture = useMemo(() => Gesture.Tap().onStart(() => {}), []);
const gesture2 = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
  onStart: () => {},
});

const combined = Gesture.Exclusive(gesture, gesture2);
return (
  <GestureDetector gesture={gesture}>
    <Animated.View style={styles.button} disabled={disabled} android_disableSound>
      <Animated.View style={styles.ripple} />
      <Text style={styles.text}>{children}</Text>
    </Animated.View>
  </GestureDetector>
);

但无法正常运行，gesture2下方出现红色下划线，提示错误：

Argument of type 'OnGestureEvent<PanGestureHandlerGestureEvent>' is not assignable to parameter of type 'Gesture'.ts(2345)

请问useAnimatedGestureHandler是否仍有适用场景，还是已被废弃？

问题原因 #

你报错的核心是**useAnimatedGestureHandler返回的不是Gesture类型对象**，而Gesture.Exclusive要求传入的必须是通过Gesture.*（比如Gesture.Tap()、Gesture.Pan()）创建的手势实例，两者不属于同一API体系，不能混用。

useAnimatedGestureHandler的现状 #

它并没有被完全废弃，但属于旧版手势体系的API，现在官方主推的是新版的Gesture API（也就是你用的Gesture.Tap()、GestureDetector这套）。

正确的手势组合写法 #

如果你要组合Tap和Pan手势，应该用新版API统一创建：

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

// 组件内部逻辑
const gesture = useMemo(() => {
  const tapGesture = Gesture.Tap().onStart(() => {
    // 处理Tap手势开始逻辑
  });
  
  const panGesture = Gesture.Pan().onStart(() => {
    // 处理Pan手势开始逻辑
  });
  
  // 用Exclusive组合两个手势，同一时间只有一个生效
  return Gesture.Exclusive(tapGesture, panGesture);
}, []);

return (
  <GestureDetector gesture={gesture}>
    <Animated.View style={styles.button} disabled={disabled} android_disableSound>
      <Animated.View style={styles.ripple} />
      <Text style={styles.text}>{children}</Text>
    </Animated.View>
  </GestureDetector>
);

useAnimatedGestureHandler的适用场景 #

只有当你维护旧版代码（使用PanGestureHandler这类旧组件）时，才需要用到它。新版API中，所有手势逻辑都可以通过Gesture.*的链式调用完成，比如要结合Reanimated动画，直接在手势的回调里使用动画API即可：

const panGesture = Gesture.Pan()
  .onStart((event) => {
    // 在这里直接处理动画逻辑，比如更新SharedValue
  })
  .onUpdate((event) => {
    // 实时更新动画状态
  });

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