React Native中Gesture Handler的onGestureEvent不触发怎么办？

迷人的常青提问于 2026-03-12 09:56:23 阅读 5

框架

我在用React Native的react-native-gesture-handler做拖拽功能，但绑定了onGestureEvent后完全没反应，手势识别器也没报错，这是啥情况？

我用了PanGestureHandler包裹了一个View，也加了ref和onGestureEvent，但无论怎么滑动都没触发回调。是不是漏了什么必要配置？

import { PanGestureHandler } from 'react-native-gesture-handler';

export default function DraggableBox() {
  const onGestureEvent = (event) => {
    console.log('gesture triggered', event);
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
    </PanGestureHandler>
  );
}

Redux

我来解答赞 7 收藏

反馈

1 条解答

❤彦鸽 Lv1

这个问题的核心是你漏掉了最外层的 GestureHandlerRootView 包裹。

react-native-gesture-handler 要求整个应用必须在 GestureHandlerRootView 里面，手势才能正常工作。你的代码光秃秃的没有任何包裹，手势事件根本不会触发。

改一下就是这样：

import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';



export default function DraggableBox() {

  const onGestureEvent = (event) => {

    console.log('gesture triggered', event);

  };



  return (

    <GestureHandlerRootView style={{ flex: 1 }}>

      <PanGestureHandler onGestureEvent={onGestureEvent}>

        <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />

      </PanGestureHandler>

    </GestureHandlerRootView>

  );

}

还有一点，如果你是做拖拽需要持续更新位置，光用 onGestureEvent 不够，得配合 PanGestureHandler 的 onUpdate 或者用 useAnimatedGestureHandler（如果用了 Reanimated）。但先加上 GestureHandlerRootView 试试能不能触发回调。

2026-03-12 10:04