2017-04-22 6 views
5

Mit Reaktion nativen PanResponder, wie kann ich die Bewegung blockieren, wenn die Bildschirm Touch-Koordinaten außerhalb eines bestimmten Wertebereichs sind?Sperren Bewegung mit PanResponder in reagieren nativen

Zum Beispiel, wie kann ich verhindern, dass Benutzer eine Komponente unterhalb einer bestimmten y-Position auf dem Bildschirm verschieben?

Der PanResponder verwendet Gesture Responder System.

Ich lese sorgfältig die Dokumentation, aber ich kann die Antwort nicht finden.

Jede Hilfe wird sehr geschätzt.

+0

Hey AlexB! Es scheint, dass die Antwort von @jaws funktioniert hat. Würde es Ihnen etwas ausmachen, ein Beispiel dafür zu geben, wie es aussieht, nachdem Sie die Antwort angewendet haben? Vielen Dank –

Antwort

4

Wenn Sie auf die PanResponder-Dokumentationsseite schauen, die Sie zur Verfügung gestellt haben (https://facebook.github.io/react-native/docs/panresponder.html), können Sie das Beispiel möglicherweise an Ihre Bedürfnisse anpassen.

Die Funktion verantwortlich für die Aktion in Reaktion auf eine Geste nehmen ist eine Eigenschaft von PanResponder onPanResponderMove genannt, im Beispielcode aus der Dokumentation dieses wie folgt aussieht:

_handlePanResponderMove: function(e: Object, gestureState: Object) { 
    this._circleStyles.style.left = this._previousLeft + gestureState.dx; 
    this._circleStyles.style.top = this._previousTop + gestureState.dy; 
    this._updateNativeStyles(); 
}, 

Wo das gestureState Objekt sieht wie folgt aus:

stateID - ID of the gestureState- persisted as long as there at least one touch on screen 
moveX - the latest screen coordinates of the recently-moved touch 
moveY - the latest screen coordinates of the recently-moved touch 
x0 - the screen coordinates of the responder grant 
y0 - the screen coordinates of the responder grant 
dx - accumulated distance of the gesture since the touch started 
dy - accumulated distance of the gesture since the touch started 
vx - current velocity of the gesture 
vy - current velocity of the gesture 
numberActiveTouches - Number of touches currently on screen 

Sie könnten einen bedingten Scheck in _handlePanResponderMove hinzufügen, um zu bestimmen, ob der gestureState.y0 unter einem bestimmten Schwellenwert liegt, und gelten nur eine Änderung, wenn so

Verwandte Themen