react-native-gesture-handler使⽤
安装
yarn add react-native-gesture-handler
link到原⽣项⽬中
react-native link react-native-gesture-handler
为什么写这个⽂档
官⽅⽂档看的难受。
为什么要使⽤这个库
更加的流畅、可靠。
react-native⾃带的PanResponder⼿势监视器由JS响应器系统控制⽽react-native-gesture-handler是在UI线程中识别和跟踪⼿势。
若使⽤RN官⽅提供的⼿势管理在与发⽣在主线程上的触摸交互(如iOS滑块或任何滚动视图)时，经常会遇到问题。由于主线程必须同步决定JS或滚动视图是否应该成为响应器，⽽JS只能异步响应并不能⽴即拒绝Native事件的响应，导致⼿势操作被这些Native组件劫持。
ps: 上⾯提到的JS不能⽴即拒绝Native事件的响应对应PanResponder中的onPanResponderTerminationRequest⽅法，当该⽅法返回false 时表⽰拒绝其他组件响应当前的⼿势。
问题场景⽰例：
1. 使⽤react-native-scroll-tab-view组件作为导航，左右切换视图。
2. 在react-native-scroll-tab-view内嵌套了Slider组件或者其他使⽤PanResponder⼿势监视器实现了某些⼿势操作。
3. 使⽤时常常会出现在这些⼦组件做滑动操作时，触发了react-native-scroll-tab-view组件的滑动的问题。
详情react-native项⽬中的这个issue：
我解决这个问题过程:
组件与⽅法说明
组件通⽤属性、⽅法
enabled：是否响应⼿势操作。
shouldCancelWhenOutside：当前⼿势离开当前组件区域时是否进⼊CANCELLED或FAILD状态。
simultaneousHandlers
waitFor：等待其他事件结束时才响应⼿势操作
hitSlop：可以控制视图区域的哪个部分来开始识别⼿势。与View组件的hitSlop类似
onGestureEvent：⼿势ACTIVE状态时执⾏的回调
onHandlerStateChange：⼿势状态改变时的回调
事件参数
onHadlerStateChange与onGestureEvent回调的参数event(主要⽤到的就是nativeEvent属性)
/
/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
}
⼿势操作过程中，react-native-gesture-handler提供Handlers组件的State会不断变化，开发者根据State来响应不同状态下的操作。详情查看
与PanResponder对照
说明PanGestureHandler PanResponder
是否声明成为触摸⼿势响应者或是否声明成为移动⼿势的响应者-
onStartShouldSetPanResponder
,onMoveShouldSetPanResponder
触摸⼿势开始onHadlerStateChange, State.BEGAN onPanResponderGrant
⼿势移动过程中执⾏的回调onHadlerStateChange,
onGestureEvent, State.ACTIVE
onPanResponderMove
⼿势释放onHadlerStateChange, State.END或
State.FAILED
onPanResponderReleasereactnative状态管理
是否将响应⼿势的操作交给其他组件-onPanResponderTerminationRequest ⼿势操作被其他组件或事件打断后的回调-onPanResponderTerminate
使⽤对⽐：
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
{
.
..ate({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
onPanResponderGrant: this._handlePanResponderGrant,
onPanResponderMove: this._handlePanResponderMove,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminationRequest: this._handlePanResponderRequestEnd,
onPanResponderTerminate: this._handlePanResponderEnd,
}).panHandlers
}
>
</Animated.View>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。