preface

In the project, I encountered the need to customize components to realize some more complex functions. I was too troublesome to study before. Now I have made a basic understanding. I hope to provide some help to novices and avoid some stepping holes.

Learn about PanResponder

The most basic use of PanResponder

Let's see how to use PanResponder in the code
First, introduce

import { PanResponder } from 'react-native';

Then use it in = = componentWillMount() = = and create it with PanResponder

 componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
        return true;
      },
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        return true;
      },
      onPanResponderGrant: (evt, gestureState) => {
      //Write event method
      },
      onPanResponderMove: (evt, gestureState) => {
      //Write event method
      },
      onPanResponderRelease: (evt, gestureState) => {
      //Write event method
      },
      onPanResponderTerminate: (evt, gestureState) => {
      //Write event method
      },
    })
  }

Expand panHandlers in panResponder on the component that needs touch (because the methods are saved as objects)

<View 
 {...this._panResponder.panHandlers}
>
</View>

Method meaning of PanResponder

onStartShouldSetPanResponder: whether the user is willing to be a responder when he starts touching the screen; It returns false by default and cannot respond. When it returns true, subsequent event delivery can be carried out.
onMoveShouldSetPanResponder: when each touch point starts to move, ask again whether to respond to touch interaction;
Onpanespondergrant: the event triggered after the gesture operation is started and pressed
Onpanespondermove: event triggered when the touch point moves
Onpanesponderrelease: an event triggered after the user releases all touch points (after releasing).
Onpanesponderterminate: another component has become a new responder, so the current response is terminated.

Response points:

1. Once a component becomes a responder, it is a responder until it is released. (the response will not be stopped because the query response is false again)
2. Once you become a responder, you will execute onpanespondergrant immediately, even if you become a responder in the onmoveshouldsetpanesponder phase.

Parameter resolution in event method

• nativeEvent
  • changedTouches - an array collection of all touch events that have changed since the last event (that is, all touch points that have moved since the last event)
  • identifier - the ID of the touch point
  • locationX - the abscissa of the touch point relative to the parent element
  • locationY - the ordinate of the touch point relative to the parent element
  • pageX - abscissa of the touch point relative to the root element
  • pageY - the ordinate of the touch point relative to the root element
  • target - the element ID where the touch point is located
  • Timestamp - the timestamp of the touch event, which can be used to calculate the movement speed
  • touches - a collection of all touch points on the current screen
• gestureState
  • stateID - the ID of the touch state. This ID is always valid when there is at least one touch point on the screen.
  • moveX - abscissa of the screen at the last move (0 if no move)
  • moveY - screen ordinate at the last move (0 if no move)
  • x0 - screen coordinates when the responder is generated
  • y0 - screen coordinates when the responder is generated
  • dx - cumulative lateral distance from the beginning of the touch operation
  • dy - cumulative longitudinal distance from the start of touch operation
  • vx - current lateral movement speed
  • vy - current longitudinal movement speed
  • numberActiveTouches - the number of active touch points currently on the screen

Parameter precautions

If you want to touch and move components, it is recommended to use gesturestate DX. If locationX, pageX and moveX are used, they will obtain the coordinates of the touch point, and we can't judge which point of the component the user's click will fall to, so the first click will flash directly.

Use example

//Store the marginLeft value of the component in state to make it a controlled component, and set a lastX attribute in the class to record the left value of the last component
state = {
    left: 0
  };
lastX = this.state.left

Set and change the left parameter in the move function

 onPanResponderMove: (evt, gestureState) => {
        this.green(gestureState);
      }
      
green = (gestureState) => {
    this.setState({ backgroundColor: 'green', left: this.lastX + gestureState.dx })
    console.log('move', gestureState.dx);
  }

Update the last left value in the release contact function

onPanResponderRelease: (evt, gestureState) => {
        this._unhighlight();
      },

_unhighlight = () => {
    console.log('release');
    const { left } = this.state
    this.lastX = left
  }

To be continued

Reference documents

Learn from the following Blogs:
1: Explanation and application of React Native's PanResponder
2:Detailed explanation of ReactNative PanResponder gesture response system