最近的react-native项目中需要在嵌套元素之间切换获得手势的响应权，那么作为前端的我，第一反应就是 捕获-冒泡 模型。故深入了解了一下react-native的panResponder-Api。并在此记录，以供日后中年的我可以摆脱 ***脱发 ***的烦恼。
首先 react-native 出于原生而胜于原生(开发效率上)，所以它的手势行为几乎与原生一致的。但是没有原生那样可以深度定制，不过基本能解决大部分场景。下面这张图是不是 跟 甲虫-卡布达很像，这让我想起了铁架小宝，还有帅气的水嶋宏主演的假面骑士(不小心暴露了年龄 (￣o￣).zZ )
它的手势行为 是基于“ 捕获-冒泡 ”的询问模型，这一点和web端的事件行为倒是很像。怎么理解呢？
要想获得该次手势的响应权是分2个阶段的：
一、基于onStartShouldSetPanResponderCapture/onStartShouldSetPanResponder 的询问
时机 ： 发生在手指刚触摸到屏幕的时候
-
onStartShouldSetPanResponderCapture 捕获询问
会从根元素一直询问到手指触碰到的元素(一般该元素不再有子元素)，如果在询问中途有元素获得了响应权，那么这次基于start的询问就结束了。
-
onStartShouldSetPanResponder 冒泡询问
若捕获询问阶段没有元素请求成为响应者，那么就从最内层的元素开始冒泡询问，这过程中有元素获得响应权，那么这次基于start的询问就结束了
而在start阶段获得响应者的元素在move阶段是作为询问的最内层元素。就像相当于在move询问阶段的范围可能会缩小。
二、基于onMoveShouldSetPanResponderCapture/onMoveShouldSetPanResponder 的询问
这是 唯一的方式 重新分配该次手势的响应权
时机 ： 手指开始在屏幕移动的时候
-
onMoveShouldSetPanResponderCapture 捕获询问
与start询问阶段一样，从根元素开始，一直询问是否需要获得手势权，不过这里询问的终点不再是触摸元素，而是由start产生的获权者。关键的事情说三变！！！
─=≡Σ(((つ•̀ω•́)つ
[ move阶段的 捕获询问的终点和冒泡询问的起点不再是你以为的触摸元素，而是由start询问产生的获权元素 ]
[ move阶段的 捕获询问的终点和冒泡询问的起点不再是你以为的触摸元素，而是由start询问产生的获权元素 ]
[ move阶段的 捕获询问的终点和冒泡询问的起点不再是你以为的触摸元素，而是由start询问产生的获权元素 ]
─=≡Σ(((つ•̀ω•́)つ并且你如果希望别的元素可以获得手势权，就必须给在start阶段获取手势权的元素设置
onPanResponderTerminatinRequest: ($e,$gs)=>true。表示当自己获得手势权的时候，有别的元素申请获得手势权，它将让出这次响应权，这也是分配响应权较关键的一步!!!
-
onMoveShouldSetPanResponder 冒泡询问
同start询问机制吧。
附上示例DEMO
import React from 'react';
import {View, StyleSheet, PanResponder, Text} from "react-native";
export default class Demo extends React.Component {
pan1 = PanResponder.create({
onStartShouldSetPanResponderCapture: (_,$gs) => {
console.log(JSON.stringify($gs))
console.log('%cpan1', 'color:orange', 'onStartShouldSetPanResponderCapture')
},
onStartShouldSetPanResponder: () => {
console.log('%cpan1', 'color:orange', 'onStartShouldSetPanResponder')
return true
},
onMoveShouldSetPanResponderCapture: () => {
console.log('%cpan1', 'color:orange', 'onMoveShouldSetPanResponderCapture')
},
onMoveShouldSetPanResponder: () => {
console.log('%cpan1', 'color:orange', 'onMoveShouldSetPanResponder')
},
onPanResponderTerminationRequest: () => {
console.log('%cpan1', 'color:orange', 'onPanResponderTerminationRequest')
},
onPanResponderGrant: () => {
console.log('%cpan1', 'color:orange', 'onPanResponderGrant')
},
onPanResponderMove: (_,$gs) => {
console.log(JSON.stringify($gs))
console.log('%cpan1', 'color:orange', 'onPanResponderMove')
},
onPanResponderRelease: () => {
console.log('%cpan1', 'color:orange', 'onPanResponderRelease')
},
})
pan2 = PanResponder.create({
onStartShouldSetPanResponderCapture: () => {
console.log('%cpan2', 'color:orange', 'onStartShouldSetPanResponderCapture')
},
onStartShouldSetPanResponder: () => {
console.log('%cpan2', 'color:orange', 'onStartShouldSetPanResponder')
},
onMoveShouldSetPanResponderCapture: () => {
console.log('%cpan2', 'color:orange', 'onMoveShouldSetPanResponderCapture')
// return true
},
onMoveShouldSetPanResponder: () => {
console.log('%cpan2', 'color:orange', 'onMoveShouldSetPanResponder')
},
onPanResponderTerminationRequest: () => {
console.log('%cpan2', 'color:orange', 'onPanResponderTerminationRequest')
},
onPanResponderGrant: () => {
console.log('%cpan2', 'color:orange', 'onPanResponderGrant')
},
onPanResponderMove: () => {
console.log('%cpan2', 'color:orange', 'onPanResponderMove')
},
onPanResponderRelease: () => {
console.log('%cpan2', 'color:orange', 'onPanResponderRelease')
},
})
pan3 = PanResponder.create({
onStartShouldSetPanResponderCapture: () => {
console.log('%cpan3', 'color:orange', 'onStartShouldSetPanResponderCapture')
},
onStartShouldSetPanResponder: () => {
console.log('%cpan3', 'color:orange', 'onStartShouldSetPanResponder')
},
onMoveShouldSetPanResponderCapture: () => {
console.log('%cpan3', 'color:orange', 'onMoveShouldSetPanResponderCapture')
},
onMoveShouldSetPanResponder: () => {
console.log('%cpan3', 'color:orange', 'onMoveShouldSetPanResponder')
},
onPanResponderTerminationRequest: () => {
console.log('%cpan3', 'color:orange', 'onPanResponderTerminationRequest')
},
onPanResponderGrant: () => {
console.log('%cpan3', 'color:orange', 'onPanResponderGrant')
},
onPanResponderMove: () => {
console.log('%cpan3', 'color:orange', 'onPanResponderMove')
},
onPanResponderRelease: () => {
console.log('%cpan3', 'color:orange', 'onPanResponderRelease')
},
})
render() {
return (
<View
style={styles.pan1}
{...this.pan1.panHandlers}
>
<View
style={styles.pan2}
{...this.pan2.panHandlers}
>
<View
style={styles.pan3}
{...this.pan3.panHandlers}
>
<Text>responder 询问模型详解</Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
pan1: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'red',
justifyContent: 'center'
},
pan2: {
height: 200,
justifyContent: 'center',
backgroundColor: 'yellow'
},
pan3: {
height: 100,
backgroundColor: 'blue'
}
})
注意：
release 事件只会基于最后获得响应权的元素定义的行为去执行。若响应权有变更，会从那个元素定义的 grant事件开始。
多指的情况下，将每个手指的触摸行为独立区分就可以了。相当于一个并行操作。每个手指的手势行为有它自己独立的生命周期。
~ 关于作者 ~
这是我在简书发表的第一篇 博文，希望大家多多支持给点鼓励，如有错误的地方也请第一时间告诉作者，避免误人子弟 o((⊙﹏⊙))o.
