2016-08-03 14 views
5

Próbuję obsłużyć długie naciśnięcie w React Native przez PanResponder. Po przyzwoitych poszukiwaniach nie mogłem znaleźć "właściwej drogi", więc proszę o to. Ideą jest wykonanie kodu po wykryciu długiego naciśnięcia (kliknięcia) na ekranie. doszedłem do czegoś takiego:Jak obsługiwać długie prasowanie PanResponder?

handlePanResponderGrant(e, gestureState){ 
    // On the press of the button set a timeout 
    myVar = setTimeout(this.MyExecutableFunction(), LONG_PRESS_MIN_DURATION); 
} 

handlePanResponderRelease(e, gestureState) { 
    // Clear the timeout if the press is released earlier than the set duration 
    clearTimeout(myVar); 
} 

Czy to dobry sposób, żeby obsłużyć długi prasy czy jest jakiś lepszy sposób?

+0

'this.MyExecutableFunction()' 'musi być this.MyExecutableFunction' i' clearTimeout (myVar) 'musi być wykonany w' handlePanResponderTerminate' także , aby mieć pewność, że po zakończeniu druku aplikacja nie będzie go liczyła jako długie naciśnięcie. –

Odpowiedz

7

Skończyłem wykonywanie tej funkcji z setTimeout. Oto kod, który ma funkcje wykrywania, która część ekranu został przytrzymany (lewy lub prawy):

handlePanResponderGrant(e, gestureState) { 
    console.log('Start of touch'); 

    this.long_press_timeout = setTimeout(function(){ 
      if (gestureState.x0 <= width/2) 
      { 
       AlertIOS.alert(
        'Left', 
        'Long click on the left side detected', 
        [ 
        {text: 'Tru dat'} 
        ] 
       ); 
      } 
      else { 
       AlertIOS.alert(
        'Right', 
        'So you clicked on the right side?', 
        [ 
        {text: 'Indeed'} 
        ] 
       ); 
      } 
     }, 
     LONG_PRESS_MIN_DURATION); 
} 
handlePanResponderMove(e, gestureState) { 
    clearTimeout(this.long_press_timeout); 
} 
handlePanResponderRelease(e, gestureState){ 
    clearTimeout(this.long_press_timeout); 
    console.log('Touch released'); 
} 
handlePanResponderEnd(e, gestureState) { 
    clearTimeout(this.long_press_timeout); 
    console.log('Finger pulled up from the image'); 
} 
+0

Upewnij się, że ustawiłeś 'onShouldBlockNativeResponder', aby zwracał' false' na 'PanResponder' dla urządzeń z systemem Android, w przeciwnym razie' PanResponder' przechwyci gest i nie pozwoli na normalne przewijanie. –

0

mam Carousel wewnątrz Scrollview i chciałem wiedzieć, gdzie użytkownik nacisnął na pozycji Carousel . Skończyło się to dzięki @Alexander Netsov.

this._panResponder = PanResponder.create({ 
    onStartShouldSetPanResponder:() => true, 
    onMoveShouldSetPanResponder:() => false, 
    onPanResponderGrant: (e, gestureState) => { 
    this.onLongPressTimeout = setTimeout(() => { 
     console.log("ON LONG PRESS", gestureState); 
    }, LONG_PRESS_DELAY); 
    }, 
    onPanResponderRelease:() => { 
    clearTimeout(this.onLongPressTimeout); 
    }, 
    onPanResponderTerminate:() => { 
    clearTimeout(this.onLongPressTimeout); 
    }, 
    onShouldBlockNativeResponder:() => false, 
    onPanResponderTerminationRequest:() => true 
}); 

pionie ScrollView, poziome Carousel i PanResponder, wszyscy pracują perfekcyjnie na Androida.

Uwaga: To nie testowane na iOS