手势响应系统
手势响应系统管理应用程序中手势的生命周期。当应用程序确定用户的意图时,一次触摸可以经历几个阶段。例如,应用程序需要确定触摸是滚动、在小部件上滑动还是点击。这甚至可能在触摸持续期间发生变化。还可能存在多个同时进行的触摸。
需要触摸响应系统,以允许组件协商这些触摸交互,而无需了解其父组件或子组件的任何额外信息。
最佳实践
为了让你的应用程序感觉良好,每个动作都应该具有以下属性
- 反馈/高亮显示 - 向用户显示正在处理其触摸的是什么,以及当他们释放手势时会发生什么
- 可取消性 - 执行动作时,用户应该能够通过将手指拖离来在中途中止它
这些功能让用户在使用应用程序时感到更舒适,因为它允许人们进行实验和交互,而无需担心犯错。
TouchableHighlight 和 Touchable*
响应系统可能很复杂。因此,我们为应该“可点击”的事物提供了抽象的 Touchable
实现。它使用响应系统并允许您以声明方式配置点击交互。在任何您会使用网页上的按钮或链接的地方,请使用 TouchableHighlight
。
响应者生命周期
视图可以通过实现正确的协商方法成为触摸响应者。有两种方法可以询问视图是否希望成为响应者
View.props.onStartShouldSetResponder: evt => true,
- 此视图是否希望在触摸开始时成为响应者?View.props.onMoveShouldSetResponder: evt => true,
- 当视图不是响应者时,为视图上的每次触摸移动调用:此视图是否希望“声明”触摸响应性?
如果视图返回 true 并尝试成为响应者,则会发生以下情况之一
View.props.onResponderGrant: evt => {}
- 视图现在正在响应触摸事件。这是高亮显示并向用户显示正在发生什么的时候View.props.onResponderReject: evt => {}
- 其他东西现在是响应者并且不会释放它
如果视图正在响应,则可以调用以下处理程序
View.props.onResponderMove: evt => {}
- 用户正在移动他们的手指View.props.onResponderRelease: evt => {}
- 在触摸结束时触发,即“触摸抬起”View.props.onResponderTerminationRequest: evt => true
- 其他东西想要成为响应者。此视图是否应该释放响应者?返回 true 允许释放View.props.onResponderTerminate: evt => {}
- 响应者已从视图中移除。可能是由其他视图在调用onResponderTerminationRequest
后移除,也可能是由操作系统未经请求移除(在 iOS 上的控制中心/通知中心发生)
evt
是一个合成触摸事件,其形式如下
nativeEvent
changedTouches
- 自上次事件以来所有已更改的触摸事件数组identifier
- 触摸的 IDlocationX
- 触摸的 X 位置,相对于元素locationY
- 触摸的 Y 位置,相对于元素pageX
- 触摸的 X 位置,相对于根元素pageY
- 触摸的 Y 位置,相对于根元素target
- 接收触摸事件的元素的节点 IDtimestamp
- 触摸的时间标识符,用于速度计算touches
- 屏幕上所有当前触摸的数组
捕获 ShouldSet 处理程序
onStartShouldSetResponder
和 onMoveShouldSetResponder
以冒泡模式调用,其中最深层节点首先被调用。这意味着当多个视图对 *ShouldSetResponder
处理程序返回 true 时,最深层组件将成为响应者。在大多数情况下这是可取的,因为它确保所有控件和按钮都可用。
然而,有时父级会希望确保它成为响应者。这可以通过使用捕获阶段来处理。在响应系统从最深层组件冒泡之前,它将执行捕获阶段,触发 on*ShouldSetResponderCapture
。因此,如果父视图希望防止子视图在触摸开始时成为响应者,它应该有一个返回 true 的 onStartShouldSetResponderCapture
处理程序。
View.props.onStartShouldSetResponderCapture: evt => true,
View.props.onMoveShouldSetResponderCapture: evt => true,
PanResponder
有关更高级别手势解释,请查看 PanResponder。