Как сгенерировать событие касания в React Native

Я пытаюсь включить panResponder для перемещения компонента по экрану в режиме перетаскивания. Однако это перетаскивание должно быть инициировано с помощью longPress на таком элементе.

longPress фиксирует событие, поэтому, когда panResponder включено onStartShouldSetPanResponder => this.state.panEnabled, нам нужно нажать еще раз.

Я хотел бы запустить собственное событие или активировать перетаскивание без повторного нажатия. Можно ли повторно создать нативное событие? Можем ли мы каким-либо образом передать его в panResponder?

Спасибо!


react-native reactjs javascript react-native-android
person jsdario    schedule 04.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня это работает без использования longTouch, а вместо этого просто с использованием panResponder (хотя тот же эффект, что и longTouch), взгляните:

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

   }

}

Вы можете настроить время, необходимое для запуска состояния «canMove», изменив константу LONGPRESS_TIMER. Надеюсь, это поможет!

person David    schedule 04.08.2016