Skip to content

使用react-native-gesture-handler时,长按 手势结束后不会发送mouseup事件到zr #273

@vcup

Description

@vcup

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
如题,组件设置 useRNGH 之后,在画布长按即可

Expected behavior
长按 手势结束后应该发送mouseup事件

Screenshots
no

Desktop (please complete the following information):
无关

Smartphone (please complete the following information):
无关

Additional context
我已经了解问题是如何发生的,当前发送对应事件的代码如下

export const getDefaultPanRNGesture = (
Gesture: RNGHType['Gesture'],
dispatchEvents: DispatchEvents
) => {
return Gesture.Pan()
.runOnJS(true)
.withTestId('RNGH-pan-handler')
.maxPointers(1)
.onBegin((e) => {
dispatchEvents(['mousedown', 'mousemove'], e);
})
.onUpdate(
throttle((e) => {
dispatchEvents(['mousemove'], e);
}, 50)
)
.onEnd((e) => {
dispatchEvents(['mouseup'], e);
});
};

这里使用了onBegin而不是onStart应该是有意为之,可能是为了其它两个手势没有识别时也能发送mousedown事件
但根据文档

onEnd(callback)

Set the callback that is being called when the gesture that was recognized by the handler finishes. It will be called only if the handler was previously in the active state.
设置手势处理程序识别完成后要调用的回调函数。仅当处理程序之前处于激活状态时才会调用此回调函数。
onEnd只有在激活时才执行回调,而长按不会激活Gesture.Pan

解决方案很简单,只需要把onEnd改为onFinalize即可。这样会在Gesture.Tap手势激活时发送两次mouseup,但我们应该直接让Gesture.Tap手势在onEnd回调中只发送'click'事件,同时移除onStart回调。

需要我提交一个PR吗

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions