So geben Sie ein Berührungsereignis in der nativen Antwort aus

Question

Ich versuche, panResponder zu aktivieren, um eine Komponente im Drag & Drop-Modus durch den Bildschirm zu bewegen. Dieses Drag & Drop muss jedoch durch ein longPress auf einem solchen Element initiiert werden.

longPress erfasst das Ereignis und so, wenn panResponder aktiviert ist onStartShouldSetPanResponder => this.state.panEnabled müssen wir erneut drücken.

Ich möchte ein natives Ereignis auslösen oder sonst den Ziehvorgang aktivieren, ohne erneut zu drücken. Ist es möglich, ein natives Ereignis erneut zu emittieren? Können wir es in irgendeiner Weise an den panResponder weitergeben?

Danke!

Answer 1

Ive erhielt diese Arbeiten ohne longTouch zu verwenden und stattdessen nur mit dem panResponder (gleiche Wirkung wie die longTouch though), werfen Sie einen Blick:

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} /> 

    } 

} 

Sie die Zeit einstellen kann er die „canMove“ auszulösen nimmt Zustand, indem Sie die LONGPRESS_TIMER const ändern, hoffe es hilft!