问题描述
我正在尝试启用 panResponder 以拖放模式在屏幕上移动组件.但是,这种拖放必须通过在此类元素上的 longPress
启动.
I am trying to enable panResponder to move a component through the screen in a drag and drop mode. However this drag and drop must be initiated through a longPress
on such element.
longPress
捕获事件,因此当 panResponder
启用时 onStartShouldSetPanResponder =>this.state.panEnabled
我们需要再次按下.
longPress
captures the event and so when panResponder
is enabled onStartShouldSetPanResponder => this.state.panEnabled
we need to press again.
我想触发一个本地事件,或者,在不再次按下的情况下激活拖动.是否可以重新发出本地事件?我们可以以任何方式将其传递给 panResponder 吗?
I would like to fire a native event, or, else, activate the drag without pressing again. Is it possible to re-emit a native event? Can we pass it to the panResponder in any way?
谢谢!
推荐答案
我没有使用 longTouch
而只是使用 panResponder
(效果与 longTouch
相同)code>longTouch),看看:
Ive got this working without using longTouch
and instead just using the panResponder
(same effect as the longTouch
though), take a look:
import React, { Component } from 'react';
import {
View,
PanResponder
} from 'react-native';
const LONGPRESS_TIMER = 300;
class DraggableComponent extends Component {
constructor() {
super();
this.timer = null;
this.state = {
canMove: false
}
this._panResponder = this.setUpPanResponder();
}
setUpPanResponder() {
const self = this;
return PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
self.timer = setTimeout(() => {
self.setState({canMove: true});
}, LONGPRESS_TIMER);
},
onPanResponderMove: (evt, gestureState) => {
if(this.state.canMove) {
console.log('moving', gestureState);
// code to move view here
}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
clearTimeout(self.timer);
self.setState({canMove: false});
}
});
}
render() {
return <View
style={{
width: 100,
height: 100,
backgroundColor: this.state.canMove ? 'green' : 'blue'}}
{...this._panResponder.panHandlers} />
}
}
您可以通过更改 LONGPRESS_TIMER
常量来调整触发canMove"状态所需的时间,希望对您有所帮助!
You can adjust the time it takes to trigger the "canMove" state by changing the LONGPRESS_TIMER
const, Hope it helps!
这篇关于如何在本机反应中发出触摸事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!