React-native gesture response and processing of touch events

React-native touch event:

Touchablehighlight, touchablenativefeedback, touchableopacity, and touchablewithoutfeedback.

The event parameter is included in the functions triggered by the onpress event. The nativeevent parameter is as follows:

Locationx and locationy are the positions of the touch relative to the component.

Pagex and Pagey are the position of the touch relative to the screen

Timestamp is the timestamp.

Gesture operation panresponder

For usage instructions, see react-native instance:

componentWillMount: function () {
    this._panResponder = PanResponder.create ({
      // Request to be a responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // Start gesture operation. Give users some visual feedback to let them know what happened!

        // gestureState. {x, y} will now be set to 0
      },
      onPanResponderMove: (evt, gestureState) => {
        // The last movement distance is gestureState.move {X, Y}

        // The cumulative gesture movement distance from the beginning of becoming a responder is gestureState.d {x, y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user releases all touch points, and the view has now become the responder.
        // Generally this means that a gesture operation has been successfully completed.
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become a new responder, so the current gesture will be cancelled.
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Return a boolean value to determine whether the current component should prevent the native component from becoming a JS responder
        // returns true by default. Currently only Android is supported.
        return true;
      },
    });
  },

  render: function () {
    return (
      <View {... this._panResponder.panHandlers} />
    );
  }, 

If you want to learn more about the touch or click event mechanism or detailed parameter information see: rn official https://reactnative.cn/docs/gesture-responder-system/, https://reactnative.cn/docs/panresponder/ and this article: https://www.race604.com/react-native-touch-event/

 

React-native gesture response and processing of touch events