文档中表示:
只需在PanGesture上将
manualActivation
设为true,并使用StateManager,如果用户在长按持续时间之前尝试拖动组件,则使手势失败。
然而,我无法在PanGesture
的回调函数中测量时间,因为如果我尝试使用setTimeout
,应用程序会崩溃。即使我能够使用setTimeout
,我也无法获取GestureStateManager
的引用,除非在触摸回调函数中,因此我不确定如何将手势移动到START
状态。
除了setTimeout
以外,是否有其他工具可以用于实现计时器,看起来似乎是RN Reanimated工作区?例如,我可以使用performance.now()
吗?
以下是我目前的进展:
const isPressed = useSharedValue(false);
const isDragging = useSharedValue(false);
const start = useSharedValue({
x: 0,
y: 0,
});
const offset = useSharedValue({
x: 0,
y: 0,
});
const gesture =
Gesture.Pan()
.manualActivation(true)
.onBegin((evt) => {
console.log('pan begin');
})
.onStart(() => {
console.log('pan start');
isPressed.value = true;
offset.value = {
x: 0,
y: 0,
};
})
.onTouchesDown((evt, state) => {
if (evt.numberOfTouches !== 1) {
state.fail();
}
isPressed.value = true;
start.value = {
x: evt.allTouches[0].x,
y: evt.allTouches[0].y,
};
// using setTimeout here causes a crash, and using runOnJS doesn't fix it
// runOnJS(setTimeout)(() => {
// isDragging.value = true;
// state.activate();
// }, 500);
})
.onTouchesMove((evt, state) => {
isPressed.value = true;
const offsetX = start.value.x - evt.allTouches[0].x;
const offsetY = start.value.y - evt.allTouches[0].y;
const dist = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
if (dist > 10) {
state.fail();
}
})
.onUpdate((evt) => {
offset.value = {
x: evt.translationX,
y: evt.translationY,
};
})
.onFinalize(() => {
offset.value = {
x: 0,
y: 0,
};
isPressed.value = false;
isDragging.value = false;
console.log('pan finalize');
});