React Native - PanResponder - 捕获

最近的react-native项目中需要在嵌套元素之间切换获得手势的响应权，那么作为前端的我，第一反应就是 捕获-冒泡 模型。故深入了解了一下react-native的panResponder-Api。并在此记录，以供日后中年的我可以摆脱 ***脱发 ***的烦恼。

首先 react-native 出于原生而胜于原生(开发效率上)，所以它的手势行为几乎与原生一致的。但是没有原生那样可以深度定制，不过基本能解决大部分场景。下面这张图是不是 跟 甲虫-卡布达很像，这让我想起了铁架小宝，还有帅气的水嶋宏主演的假面骑士(不小心暴露了年龄 (￣o￣).zZ )

image

它的手势行为 是基于“ 捕获-冒泡 ”的询问模型，这一点和web端的事件行为倒是很像。怎么理解呢？

要想获得该次手势的响应权是分2个阶段的：

一、基于onStartShouldSetPanResponderCapture/onStartShouldSetPanResponder 的询问

时机 ： 发生在手指刚触摸到屏幕的时候

• onStartShouldSetPanResponderCapture 捕获询问

  会从根元素一直询问到手指触碰到的元素(一般该元素不再有子元素)，如果在询问中途有元素获得了响应权，那么这次基于start的询问就结束了。

• onStartShouldSetPanResponder 冒泡询问

  若捕获询问阶段没有元素请求成为响应者，那么就从最内层的元素开始冒泡询问，这过程中有元素获得响应权，那么这次基于start的询问就结束了

  而在start阶段获得响应者的元素在move阶段是作为询问的最内层元素。就像相当于在move询问阶段的范围可能会缩小。

image

二、基于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'
  }
})

react-native panResponder传送门

注意：

release 事件只会基于最后获得响应权的元素定义的行为去执行。若响应权有变更，会从那个元素定义的 grant事件开始。

多指的情况下，将每个手指的触摸行为独立区分就可以了。相当于一个并行操作。每个手指的手势行为有它自己独立的生命周期。

~ 关于作者 ~
这是我在简书发表的第一篇 博文，希望大家多多支持给点鼓励，如有错误的地方也请第一时间告诉作者，避免误人子弟 o((⊙﹏⊙))o.