2017-04-22 9 views
5

反応するネイティブPanResponderを使用すると、画面のタッチ座標が特定の範囲の値を外れている場合、どのように動きをブロックできますか?反応したネイティブのPanResponderでの動きをロックする

たとえば、ユーザーが画面上の特定の位置よりも下にコンポーネントを移動させないようにするにはどうすればよいですか?

PanResponderはGesture Responder Systemを使用します。

私はドキュメントを慎重に読んでいますが、答えが見つかりません。

ご協力いただきまして誠にありがとうございます。

+0

こんにちはAlexB! @ジョーズの答えが働いたようだ。答えを適用した後の様子をいくつか紹介していただけますか?ありがとう –

答えて

4

提供したPanResponderのドキュメントページ(https://facebook.github.io/react-native/docs/panresponder.html)を見ると、必要に応じてこの例を変更できると思います。

gestureStateオブジェクトは、次のようになります
_handlePanResponderMove: function(e: Object, gestureState: Object) { 
    this._circleStyles.style.left = this._previousLeft + gestureState.dx; 
    this._circleStyles.style.top = this._previousTop + gestureState.dy; 
    this._updateNativeStyles(); 
}, 

ジェスチャーに反応して行動を取る責任関数はこのように見えるの文書からサンプルコードでは、onPanResponderMoveをPanResponderのプロパティと呼ばれています

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 

あなたはgestureState.y0がある閾値を下回っているかどうかを判断するために_handlePanResponderMoveで、条件のチェックを追加し、変更のみを適用する可能性がある場合はその

関連する問題