ReactNative touch event handling

Understanding of the mechanisms of capture and bubbling RN touch event

Components A, B, C the structure

组件A
    组件B
        组件C

Capture, bubbling mechanism

sequenceDiagram
A->>A: 是否捕获？若是则停止向下一级传递
A->>B: 
B->>B: 是否捕获？若是则停止向下一级传递
B->>C: 
C->>C: 是否捕获？若是则停止向下一级传递
C->>C: 是否声明成为响应者？无论是否，都冒泡。
C->>B: 
B->>B: 是否声明成为响应者？无论是否，都冒泡。
B->>A: 
A->>A: 是否声明成为响应者？

Capture of callback can decide whether to block the event down-level components pass through onStartShouldSetResponderCapture or onMoveShouldSetResponderCapture.

Bubble period may decide by onStartShouldSetResponder or onMoveShouldSetPanResponder callback whether to become responders. If the parent assembly and the lower assembly returns true, the subordinate components become responders current touch event. (Deeper level component the higher the priority)

supplement:

Interception and Distribution react-native Touch event

From CSDN Bowen

How to handle touch events RN

View component attribute pointerEvents

Can be used to control whether the current view as a target of the touch event.

auto: the view can be the target of a touch event.
none: view not be the target of the touch event.
box-none: can not view itself as a touch event target, but its child views can be.

View component available gesture

onTouchStart={()=>console.log('start')}
onTouchMove={()=>console.log('move')}
onTouchEnd={()=>console.log('end')}

PanResponder gesture Monitor

// 创建监视器
this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: ()=>{},
  ...
})

// 在View中使用
<View
  {...this.panResponder}
/>

Event parameters

Each event has two return parameters nativeEvent, gestureState

nativeEvent contains the following properties

changedTouches - 在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）
identifier - 触摸点的 ID
locationX - 触摸点相对于父元素的横坐标（实践证明不好用，值会突变！原因未知）
locationY - 触摸点相对于父元素的纵坐标（实践证明不好用，值会突变！）
pageX - 触摸点相对于根元素的横坐标
pageY - 触摸点相对于根元素的纵坐标
target - 触摸点所在的元素 ID
timestamp - 触摸事件的时间戳，可用于移动速度的计算
touches - 当前屏幕上的所有触摸点的集合

gestureState contains the following properties:

stateID 此次触摸事件的ID
moveX 最近一次移动的屏幕坐标
moveY
x0 响应器产生时的屏幕坐标（手势第一个坐标）
y0
dx 触摸开始累积的横向路程
dy
vx 当前的横向移动速度
vy
numberActiveTouches 触摸点数量

Event Life Cycle

Single-point event

If a parent wants to prevent onStartShouldSetResponderCapture view child views in response to touch start event, it should set this method and return true.

onStartShouldSetResponder when the user starts to touch (finger just touch the screen the moment), is willing to become a responder to return

onPanResponderGrant This view began to respond to touch events. In this case highlighted the need to tell the user is responding.

onPanResponderStart touch event officially monitored

onPanResponderEnd touch event ends

onPanResponderRelease call this function at the end of the entire touch event.

Mobile event

onMoveShouldSetResponderCapture when you want to stop child views in response to touch move events if the parent view, it should set this method and return true

onMoveShouldSetPanResponder this view want to "adopt" the touch move events it? Whenever a touch move events in this view, and this view is not set to respond to the touch move, this function will be called.

onPanResponderGrant monitor notifies start work

onPanResponderMove This function is called when the user is moving your finger on the screen.

Abnormal events

onPanResponderReject have a responder is in the active state, and does not require a response to another view this incident the release of this event.

onPanResponderTerminationRequest when some other view wants to be responder incident and asked to give up this view in response to an event, it will call this function. If allowed to release response, it returns true.

onPanResponderTermination response is the view from the "stolen" a. Possibly after call onResponderTerminationRequest, is another view of the "stolen" a (see onresponderterminationrequest), may also be terminated due to the OS in response to unconditional (for example, the control center on iOS / Message Center)