react-native-gesture-handler 使用

installation

yarn add react-native-gesture-handler

link to the original project

react-native link react-native-gesture-handler 

Why write this document

Official documents look bad. React Native Gesture Handler official website documents

Why use this library

More smooth and reliable.

react-native comes PanResponder gesture monitor and react-native-gesture-handler is identified and tracked by the UI thread gesture JS control system response.

If you use gestures RN official management in the event on the main thread of touch interaction (such as iOS slider or any scroll view) and, often encounter problems. == Since the main thread must synchronize JS decide whether or scroll view should be the response, while JS can only asynchronous response does not immediately reject Native incident response, leading to gestures hijacked Native these components. ==

ps: JS mentioned above can not be immediately rejected in response to an event onPanResponderTerminationRequest Native PanResponder corresponding method, other components of refusal in response to the gesture when the current method returns false.

Problem Scenario Example:

1. Use react-native-scroll-tab-view as the navigation components, switching the left and right views.
2. Slider assembly nested or other gestures using PanResponder monitor the react-native-scroll-tab-view to achieve a certain gesture operation.
3. Often occur when you do these subcomponents sliding operation, triggering the problem sliding react-native-scroll-tab-view component use.

Details react-native projects in this Issue: How to stopPropagation Touch Event

I solved this problem process: how to set up within the RN scrollable component of a scroll area is prohibited

Component and Method Description

Components common attributes, methods Common handler properties

enabled：是否响应手势操作。
shouldCancelWhenOutside：当前手势离开当前组件区域时是否进入CANCELLED或FAILD状态。
simultaneousHandlers
waitFor：等待其他事件结束时才响应手势操作
hitSlop：可以控制视图区域的哪个部分来开始识别手势。与View组件的hitSlop类似
onGestureEvent：手势ACTIVE状态时执行的回调
onHandlerStateChange：手势状态改变时的回调

Event parameters

onHadlerStateChange and onGestureEvent callback parameter event (main use is nativeEvent property)

//event的属性声明
interface event {
    nativeEvent: nativeEvent
    //...
}

//nativeEvent的属性声明
interface nativeEvent {
    absoluteX: number //相对于根视图，指针的当前位置的X坐标（当放置多个手指时的手指或前导指针）。
    absoluteY: number //相对于根视图，指针的当前位置的Y坐标（当放置多个手指时的手指或前导指针）。
    handlerTag: number
    numberOfPointers: number //表示当前放置在屏幕上的指针（手指）的数量。
    state: number //手势处理程序的当前状态
    translationX: number //手势开始到目前为止在水平方向上的移动距离。它与PanResponder中的dx类似
    translationY: number //手势开始到目前为止在垂直方向上的移动距离。
    velocityX: number //水平移速
    velocityY: number //垂直移速
    x: number //当前手势位置相对于附加PanGestureHandler的视图的X
    y: number //当前手势位置相对于附加PanGestureHandler的视图的Y
}

Gesture during operation, react-native-gesture-handler provided State Handlers assembly will continue to change, the developer in response to the operation under different conditions in accordance with State. For more details, see Handler State

And PanResponder control

Explanation	PanGestureHandler	PanResponder
Whether declared or become a touch gesture in response to whether the declaration to be moving gesture responders	-	onStartShouldSetPanResponder ,onMoveShouldSetPanResponder
Touch gesture starts	onHadlerStateChange, State.BEGAN	onPanResponderGrant
Callback gesture to move the process execution	onHadlerStateChange, onGestureEvent, State.ACTIVE	onPanResponderMove
Gesture release	onHadlerStateChange, State.END或State.FAILED	onPanResponderRelease
Whether the gesture in response to the operation of other components	-	onPanResponderTerminationRequest
Gestures after being interrupted by other components or event callbacks	-	onPanResponderTerminate

Use comparison:

PanGestureHandler

import {PanGestureHandler, State} from 'react-native-gesture-handler'

//...

<PanGestureHandler
    onHadlerStateChange = ({nativeEvent}) => {
        switch (nativeEvent.state) {
          case State.UNDETERMINED:
            console.log('等待手势')
            break;
          case State.BEGAN:
            console.log('手势开始')
            break;
          case State.CANCELLED:
            console.log('手势取消')
            break;
          case State.ACTIVE:
            console.log('手势活跃')
            break;
          case State.END:
            console.log('手势结束')
            break;
          case State.FAILED:
            console.log('失败')
            break;
          default:
            console.log('其他')
            break;
        }
    }
    onGestureEvent = ({ nativeEvent }) => {
    
    }
>
    <Animated.View 
        //...
    >
    </Animated.View>
</PanGestureHandler>

PanResponder

import {PanResponder} from 'react-native'

<Animated.View
    {
        ...PanResponder.create({
            onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
            onPanResponderGrant: this._handlePanResponderGrant,
            onPanResponderMove: this._handlePanResponderMove,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminationRequest: this._handlePanResponderRequestEnd,
            onPanResponderTerminate: this._handlePanResponderEnd,
        }).panHandlers
    }
>
</Animated.View>