PanResponder
將幾個觸發(fā)調(diào)節(jié)成一個單一的觸發(fā)動作。該方法可以使單一觸發(fā)動作對額外的觸發(fā)具有彈性,可以用來識別簡單的多點觸發(fā)動作。
它為響應(yīng)處理程序提供了一個可預(yù)測包,這個相應(yīng)處理程序是由動作應(yīng)答系統(tǒng)提供的。對每一個處理程序,在正常事件旁提供了一個新的 gestureState
對象。 一個 gestureState
對象有以下屬性:
stateID
-gestureState 的ID-在屏幕上保持至少一個觸發(fā)動作的時間
moveX
-最近動態(tài)觸發(fā)的最新的屏幕坐標
x0
-應(yīng)答器橫向的屏幕坐標
y0
-應(yīng)答器縱向的屏幕坐標
dx
-觸發(fā)開始后累積的橫向動作距離
dy
-觸發(fā)開始后累積的縱向動作距離
vx
-當前手勢的橫向速度
vy
-當前手勢的縱向速度
numberActiveTouch
-屏幕上當前觸發(fā)的數(shù)量
componentWillMount: function() {
this._panGesture = PanResponder.create({ // Ask to be the responder: onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => { // The guesture has started. Show visual feedback so the user knows // what is happening! // gestureState.{x,y}0 will be set to zero now
}, onPanResponderMove: (evt, gestureState) => { // The most recent move distance is gestureState.move{X,Y} // The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
}, onResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { // The user has released all touches while this view is the // responder. This typically means a gesture has succeeded
}, onPanResponderTerminate: (evt, gestureState) => { // Another component has become the responder, so this gesture // should be cancelled
},
});
}, render: function() { return (
<View {...this._panResponder.panHandlers} />
);
},
想要查看它的實際應(yīng)用,嘗試 PanResponder example in UIExplorer。
static create(config: object)
@param {object} 所有應(yīng)答器回調(diào)配置的增強版本,應(yīng)答器回調(diào)不僅可以提供典型的 ResponderSyntheticEvent
,還可以提供 PanResponder
動作狀態(tài)。在每一個典型的 onResponder*
回調(diào)中,用 PanResponder
對 Responder
做簡單的替換。例如, config
對象可能看起來像如下形式:
onMoveShouldSetPanResponder: (e, gestureState) => {...}
onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
onStartShouldSetPanResponder: (e, gestureState) => {...}
onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
onPanResponderReject: (e, gestureState) => {...}
onPanResponderGrant: (e, gestureState) => {...}
onPanResponderStart: (e, gestureState) => {...}
onPanResponderEnd: (e, gestureState) => {...}
onPanResponderRelease: (e, gestureState) => {...}
onPanResponderMove: (e, gestureState) => {...}
onPanResponderTerminate: (e, gestureState) => {...}
onPanResponderTerminationRequest: (e, gestureState) => {...}
一般來說,對于那些捕獲的等價事件,我們在捕獲階段更新一次 gestureState ,并且也可以在冒泡階段使用。
在 onStartShould* 回調(diào)時需要注意一點。在對節(jié)點的捕獲/冒泡階段的開始/結(jié)束事件中,它們只對更新后的gestureState
做出反應(yīng)。一旦節(jié)點成為應(yīng)答器,你可以依靠每一個被動作和 gestureState
處理后相應(yīng)更新的開始/結(jié)束事件。 (numberActiveTouches) 可能不完全準確,除非你是應(yīng)答器。
更多建議: