reactnative触摸事 件处理详解.docVIP

reactnative触摸事件处理详解 触控是移动设备的核心功能，也移动应用交互的基础，Android 和 iOS 各自都有完善的触摸事件处理机制。React Native（以下简称 RN）提供了一套统一的处理方式，能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。 1. RN 基本触摸组件 RN 的组件除了 Text，其他组件默认是不支持点击事件，也不能响应基本触摸事件，所以 RN 中提供了几个直接处理响应事件的组件，基本上能够满大部分的点击处理需求TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 和 TouchableWithoutFeedback。因为这几个组件的功能和使用方法基本类似，只是 Touch 的反馈效果不一样，所以一般我们用 Touchable** 代替。Touchable** 有如下几个回调方法： onPressIn：点击开始；onPressOut：点击结束或者离开；onPress：单击事件回调；onLongPress：长按事件回调。 它们的基本使用方法如下，这里以 TouchableHighlight 为例： TouchableHighlight onPressIn={() = console.log(onPressIn)} onPressOut={() = console.log(onPressOut)} onPress={() = console.log(onPress)} onLongPress={() = console.log(onLongPress)} Image style={styles.button} source={require(./img/rn_logo.png)} /TouchableHighlight RN 中提供的触摸组件使用非常简单，可以参考 官方文档，这里也不做详细的介绍了。下面主要介绍用户触摸事件处理。 2. 单组件触摸事件处理 我们知道，RN 的组件默认不进行处理触摸事件。组件要处理触摸事件，首先要“申请”成为摸事件的响应者（Responder），完成事件处理以后，会释放响应者的角色。一个触摸事件处理周期，是从用户手指按下屏幕，到用户抬起手指抬起结束，这是用户的一次完整触摸操作。 单个组件的单次操作交互处理的生命周期如下： 我们来详细分析一下事件处理的生命周期，在整个事件处理的过程中，组件有可能处于两种身份中的一种，并且可以相互切换：非事件响应者和事件响应者。 非事件响应者 默认情况下，触摸事件输入不会直接传递给组件，不能进行事件响应处理，也就是非事件响应者。如果组件要进行触摸事件处理，首先要申请成为事件响应者，组件有如下两个属性可以做这样的申请： 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) = {}：表示触摸手指移动的事件，这个回调可能非常频繁，所以这个回调函数的内容需要尽