【React Native】文件翻譯閱讀紀錄 - APIs - PanResponder
 |
| Facebook Open Source React Native |
PanResponder
PanResponder 將多個觸摸調和為一個手勢。它使單點觸控手勢能夠適應額外的觸摸，並可用於識別簡單的多點觸控手勢。默認情況下，PanResponder保存一個 InteractionManager 句柄，以阻止長時間運行的JS事件中斷活動手勢。
它提供了由手勢響應器系統提供的響應者處理程序的可預測包裝器。對於每個處理程序，它在本機事件對象旁邊提供一個新的gestureState對象：
onPanResponderMove: (event, gestureState) => {}
本機事件是具有以下形式的合成觸摸事件：
nativeEventchangedTouches- 自上次事件以來已更改的所有觸摸事件的數組identifier-觸摸的IDlocationX- 觸摸的X位置，相對於元素locationY- 觸摸的Y位置，相對於元素pageX-觸摸的X位置，相對於根元素pageY- 觸摸的Y位置，相對於根元素target- 接收觸摸事件的元素的節點IDtimestamp- 觸摸的時間標識符，用於速度計算touches- 屏幕上所有當前觸摸的數組
gestureState 對象具有以下內容：
- stateID - 只要屏幕上至少有一次觸摸，就會保持gestureState的ID
- moveX - 最近移動的觸摸的最新屏幕坐標
- moveY - 最近移動的觸摸的最新屏幕坐標
- x0 - 響應者授權的屏幕坐標
- y0 - 響應者授權的屏幕坐標
- dx - 觸摸開始後手勢的累積距離
- dy - 觸摸開始後手勢的累積距離
- vx - 手勢的當前速度
- vy - 手勢的當前速度
- numberActiveTouches - 當前屏幕上的觸摸次數
基本用法
class ExampleComponent extends Component {
constructor(props) {
super(props)
this._panResponder = 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 gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} 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}
},
onPanResponderTerminationRequest: (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
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
}
render() {
return (
<View {...this._panResponder.panHandlers} />
);
}
}
工作實例
要查看它的實際效果，請嘗試 PanResponder example in RNTester
Methods
參考
Methods
create()
static create(config)
@param {object} config所有響應者回調的增強版本，不僅提供典型的ResponderSyntheticEvent，還提供PanResponder手勢狀態。只需在每個典型的onResponder *回調中替換單詞Responder with PanResponder。例如，配置對像看起來像：
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) => {...}onShouldBlockNativeResponder: (e, gestureState) => {...}
通常，對於具有捕獲等價物的事件，我們在捕獲階段更新一次gestureState，並且也可以在冒泡階段使用它。
注意onStartShould *回調。 它們僅反映冒泡/捕獲到節點的開始/結束事件的更新的gestureState。 一旦節點是響應者，您就可以依賴手勢處理的每個開始/結束事件，並相應地更新gestureState。 （numberActiveTouches）可能不完全準確，除非您是響應者。
注意onStartShould *回調。 它們僅反映冒泡/捕獲到節點的開始/結束事件的更新的gestureState。 一旦節點是響應者，您就可以依賴手勢處理的每個開始/結束事件，並相應地更新gestureState。 （numberActiveTouches）可能不完全準確，除非您是響應者。
0 意見