如何在本机反应中发出触摸事件 [英] How to emit a touch event in react native

问题描述

我正在尝试启用 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!

这篇关于如何在本机反应中发出触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！