402's Dojo

React Native组件开发入门指南 - Gestures

最近一段时间在学习和实践React Native，针对与每篇官方教程做一些简单的注释记录。
虽然英文一般，但学习新知识的时候还是习惯于直接啃英文文档，理由无他，有些中文翻译实在是太烂了，而且即使翻译水平尚可也有很多知识点描述的没有英文原生文档那么准确。因此在这里只做注释性的讲解，力求对英文文档的理解更容易但是不干扰其内容。因此在文末会提供英文文档阅读时我比较陌生的词，希望也能给你帮助。

Gesture Responder System

相关代码在：ResponderEventPlugin.js

Native手势的巨大优势

  1. 反馈和高亮：告诉用户哪个控件在响应他们的touch手势，当他们抬起手指的时候会发生什么？
  2. 可取消的：当一个动作发生时，用户可以通过移开他们的手指来取消当前的操作。
    这些特性允许用户尽情的尝试和交互而不必害怕犯错误，以确保用户使用App时更舒适。

TouchableHighlight and Touchable*

API

  • View.props.onStartShouldSetResponder: (evt) => true
  • View.props.onMoveShouldSetResponder: (evt) => true
  • View.props.onResponderGrant: (evt) => {}
  • View.props.onResponderReject: (evt) => {}
  • View.props.onResponderMove: (evt) => {}
  • View.props.onResponderRelease: (evt) => {}
  • View.props.onResponderTerminationRequest: (evt) => {}
  • View.props.onResponderTerminate: (evt) => {} - 可能发生在View.props.onResponderTerminationRequest:调用之后，也可能是被OS系统触发
  • View.props.onStartShouldSetResponderCapture: (evt) => true
  • View.props.onMoveShouldSetResponderCapture: (evt) => true
    evt参数包括：
  • nativeEvent
  • changedTouches - 截至到上一个touch事件的所有touch列表
  • identifier
  • locationX
  • locationY
  • pageX
  • pageY
  • target
  • timestamp
  • touches - 当前屏幕发生的所有touch事件

iOS Responder Chain

Event Handling Guide for iOS

React Native Responder Chain

bubbling vs. capturing

冒泡和捕捉

What is event bubbling and capturing?
RN采用bubbling的事件传递方式，同时也通过capturing给父视图提供控制子视图是否响应当前touch的机会。

  • onStartShouldSetReponder和onMoveShouldSetResponder由bubbling模式触发；
  • onStartShouldSetResponderCapture由capturing模式触发。

PanResponder

如果说普通Responder是单一手势的Responder，那么PanResponder则是组合手势的Responder。
PanResponder会决定将多个touch事件放到同一个手势中，使其组合成一个多个touch共同的手势。

APIs（Methods）

PanResponder的API基本上是将Responder部分替换成PanResponder。

  • View.props.onStartShouldSetPanResponder: (e, gestureState) => {...}
  • View.props.onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
  • View.props.onMoveShouldStartPanResponder: (e, gestureState) => {...}
  • View.props.onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
  • View.props.onPanResponderGrant: (e, gestureState) => {...}
  • View.props.onPanResponderReject: (e, gestureState) => {...}
  • View.props.onPanResponderStart: (e, gestureState) => {...}
  • View.props.onPanResponderEnd: (e, gestureState) => {...}
  • View.props.onPanResponderMove: (e, gestureState) => {...}
  • View.props.onPanResponderRelease: (e, gestureState) => {...}
  • View.props.onPanResponderTerminationRequest: (e, gestureState) => {...}
  • View.props.onPanResponderTerminate: (e, gestureState) => {...}
  • View.props.onShouldBlockNativeResponder: (e, gestureState) => {...}

gestureState

  1. 上述API中除了evt参数外，多了一个gestureState的参数。
  • stateID
  • moveX
  • moveY
  • x0
  • y0
  • dx
  • dy
  • vx
  • vy
  • numberActiveTouches - 当前屏幕的touch数量
    这几个值得关系可以简单理解为下图：

Where to go

React Native组件开发入门指南 - Animations

评论