ReactNative touch事件

1.RN的基本触摸事件

RN的组件除了TextInput、ScrollView(ListView)外,默认是不支持点击事件,也不能响应基本触摸事件,所以RN中提供了几个直接处理响应事件的组件,TouchableHighlight,TouchableNativeFeedback,TouchableOpacity和TouchableWidthoutFeedback。这四个Touch类组件有如下回调方法:

  • onPressIn: 点击开始
  • onPressOut: 点击结束或者离开
  • onPress: 单击事件回调
  • onLongPress: 长按事件回调

以TouchableOpacity使用为例:

<TouchableHighlight  
  onPressIn={() => console.log("onPressIn")}
  onPressOut={() => console.log("onPressOut")}
  onPress={() => console.log("onPress")}
  onLongPress={() => console.log("onLongPress")}/>

2.单组件触摸事件处理

单个组件的单次操作交互处理的生命周期如下:

生命周期.png

在整个事件中,组件可以在非事件响应者和事件响应者中切换身份

非事件响应者
默认情况下,触摸事件输入不会直接传递给组件,不能进行事件响应处理,也就是非事件响应者。如果组件要进行触摸事件处理,首先要申请成为事件响应者,组件有如下两个属性可以做这样的申请:

  • View.props.onStartShouldSetResponder,这个属性接收一个回调函数,函数原型是function(evt): bool,在触摸事件开始(touchDown)的时候,RN会回调此函数,询问组件是否需要成为事件响应者,接收事件处理,如果返回true,表示需要成为响应者
  • View.props.onMoveShouldSetResponder,它和前一个属性类似,不过这是触摸,是进行过程中(touchMove),RN询问组件是否要成为响应者,返回true表示想要成为响应者

假如组件通过上面的方法反回了true,表示发出了申请要成为事件响应者,想要接收后续的事件输入。因为同一时刻,只能有一个事件处理响应者,RN还需要协调所有组件的事件处理请求,所以不是每个组件申请都能成功,RN通过如下两个回调来通知告诉组件它的申请结果:

  • View.props.onResponderGrant: (evt) => {}:表示申请成功,组件成为了事件处理响应者,这时组件就开始接收后序的触摸事件输入。一般情况下,这时开始,组件进入了激活状态,并进行一些事件处理或者手势识别的初始化。
  • View.props.onResponderReject: (evt) => {}:表示申请失败了,这意味着其他组件正在进行事件处理,并且它不想放弃事件处理,所以你的申请被拒绝了,后续输入事件不会传递给本组件进行处理。

事件响应者
如果通过上面的步骤,组件申请成为了事件响应者,后绪的事件输入都会通过回调函数通知到组件:

  • View.props.onResponderStart: (evt) => {}:表示手指按下时,成功申请为事件响应者的回调
  • View.props.onResponderMove: (evt) => {}:表示触摸手指移动的事件,这个回调非常频繁,所以这个回调函数的内容需要尽量简单
  • View.props.onResponderRelease: (evt) => {}:表示触摸完成(touchUp)时候的回调,表示用户完成了本次的触摸交互,这里应该完成手势识别的处理,这以后,组件不再是事件响应者,组件取消激活
  • View.props.onResponderEnd: (evt) => {}:表示组件结束事件响应的回调

在上面的图中也可以看到,在组件成为事件响应者期间,其他组件也可能会申请触摸事件处理。此时RN会通过回调询问是否可以让出响应者角色。回调如下:

  • View.props.onResponderTerminationRequest: (evt) => bool

如果回调函数返回为true,则表示同意释放响应者角色,同时会回调如下函数,通知组件事件响应处理被终止了:

  • View.props.onResonderTerminate: (evt) => {}
    这个回调也会发生在系统直接终止组件的事件处理,例如用户在触摸操作过程中,突然来电话的情况。

事件数据结构
之前的事件处理函数只写了一个参数,实际上有两个参数,一个是nativeEvent(原生事件);另一个是gestureState(手势状态)

原生事件有以下成员变量:

  • identifier:触摸的ID,一般对应手指,在多点触控的时候,用来区分哪个手指的触摸事件;
  • locationX和locationY:触摸点相对父元素的坐标
  • pageX和pageY:触摸点相对屏幕的坐标
  • timestamp:当前触摸的事件的时间戳,可以用来进行滑动计算
  • target:接收当前触摸事件的组件ID
  • changedTouches:evt数组,丛上次回调上报的触摸事件,到这次上报之间的所有事件数组。因为用户触摸过程中,会产生大量事件,有时候可能没有及时上报,系统用这种方式批量上报;
  • touches:evt数组,多点触摸的时候,包含当前所有触摸点的事件
    由于RN没有多点触控的概念,所以有些属性是不能用的,最常用的是locationX和locationY数据,需要注意的是,因为这里是Native的数据,所以他们的单位是实际像素。如果要转换为RN的逻辑单位,可以使用如下方式:
let pX = evt.nativeEvent.locationX / PixelRatio.get();

3.嵌套组件事件处理
前面也提到过,当组件需要作为事件处理响应者时,需要通过onStartShouldSetResponder或者onMoveShouldSetResponder回调返回true来申请。加入当多个组件嵌套的时候,这两个回调都反回了true的时候,但是同一个只能有一个事件处理响应者,这种情况如何处理?假设有如下布局:

Paste_Image.png

在RN中,默认情况下使用冒泡机制,最深的组件最先开始响应,所以前面描述的情况,若A、B、C三个组件的onStartShouldSetResponder都返回为true,那么只有C组件会得到响应成为响应者。这种机制才能保证界面所有的组件都能得到正确的响应。但是有些情况下,父组件可能需要处理事件,RN提供了一个劫持机制,也就是在触摸事件往下传递的时候,先询问父组件是否需要劫持,不给子组件传递事件,也就是如下两个回调:

  • View.props.onStartShouldSetResponderCapture:这个属性接收一个回调函数,函数的原型是function(evt): bool,在触摸事件开始(touchDown)的时候,RN容器组件会回调函数,询问组件是否要劫持事件,如果返回true,表示需要劫持
  • View.props.onMoveShouldSetResponderCapture:与之前类似,不过是在触摸事件询问容器是否是劫持
Paste_Image.png

4.回调函数总结

  • onStartShouldSetPanResponder: (e, gestureState) => bool
  • onStartShouldSetPanResponder: (e, gestureState) => bool
  • onMoveShouldSetPanResponder: (e, gestureState) => bool
  • onMoveShouldSetPanResponderCapture: (e, gestureState) => bool
  • onPanResponderReject: (e, gestureState) => {...}
  • onPanResponderGrant: (e, gestureState) => {...}
  • onPanResponderStart: (e, gestureState) => {...}
  • onPanResponderEnd: (e, gestureState) => {...}
  • onPanResponderRelease: (e, gestureState) => {...}
  • onPanResponderMove: (e, gestureState) => {...}
  • onPanResponderTerminate: (e, gestureState) => {...}
  • onPanResponderTerminateRequest: (e, gestureState) => {...}
  • onShouldBLockNativeResponder: (e, gestureState) => bool

可以看到,这些接口与前面接收的基础回调基本上是一一对应的,其功能也是类似,这里就不再赘述。这里有一个特别的回调 onShouldBlockNativeResponder
表示是否用 Native 平台的事件处理,默认是禁用的,全部使用 JS 中的事件处理,注意此函数目前只能在 Android 平台上使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容