onPanResponderGrant 类似于 touchStart
onPanResponderMove 类似于 touchMove
onPanResponderRelease 类似于 touchEnd
onPanResponderTerminate 类似于 touchCancel
import React, { Component } from 'react';
import {
View,
PanResponder,
StyleSheet
} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
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,
onPanResponderTerminationRequest: (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
console.log('start')
console.log(gestureState)
},
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}
console.log('move')
console.log(gestureState)
},
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
console.log('end')
console.log(gestureState)
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
console.log('cancel')
console.log(gestureState)
},
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 style={styles.container} {...this._panResponder.panHandlers} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000'
}
});