onpress写逻辑 react_ReactNative 触控逻辑浅析

移动端开发不可避免的一个问题就是交互逻辑，不论是(android/ios)原生还是(react-native)混合开发都有一套完整的交互。父组件与子组件之间的嵌套以及事件劫持，从手指在屏幕上按下的那一刻，到在屏幕上移动，再到手指松开，完成了这一系列的触控操作。对于ReactNative而言，我们大部分还是采用官方提供的组件(Text、TouchableXXX)，使用的相应的Api去处理。但是，对于一些稍微复杂的交互方式，往往官方提供的不能满足我们的业务需求，那么我就需要定制自己的逻辑组件。

ReactNative中常见的可触控方法

Text

Text 中加入了 onPress={()=>{}} 方法，即点击文字就可以触发函数

Button

Button 中加入了 onPress={()=>{}} 方法，即点击按钮就可以触发函数

Touchable系列组件

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

以上组件都支持 onPressIn 、 onPressOut 、 onPress 、 onLongPress 方法，使用方法如同 Text 和 Button 。

手势响应系统(基本)

响应的生命周期

一个View只要通过了俩个触摸事件的申请，就可以成为一个响应者。然后可以获取到触摸点的对应值和所在组件的相关信息。当滑动的时候，就可以得到滑动后的相关信息。当释放的时候，可以把本次滑动的信息更新到状态中或者释放状态更新这个数据。

在ReactNative的触摸事件处理过程中，从触发角度来看，基本上可以分为 可触发状态 和 不可触发状态 。那么在这个触发过程中，就存在俩种生命状态：既由触摸事件申请开始到触摸申请通过和触摸事件申请开始到触摸申请失败。

那么，这个就基本可以分为： 事件响应者 和 非事件响应者 。

在默认情况下，触摸事件是不会直接传递给组件，不能直接触发事件响应，也就是非事件响应者。如果组件在触发时，先进行了申请接收事件处理，并且成为了事件的响应者(相关的方法返回值为true)，那就可以做相应的触发事件。

View.props.onStartShouldSetResponder ，这个属性接收一个回调函数，函数原型是 function(evt):bool ,在触摸开始的时候(TouchDown)，ReactNative会先调用此函数，询问组件是否需要成为事件的响应者。

View.props.onMoveShouldSetResponder ,这个属性接收一个回调函数，函数原型同样是 function(evt):bool ,在触摸移动的时候(TouchMove)，ReactNative会先调用此函数，询问组件是否需要成为事件的响应者。

我们查看通过 react-native 的 PanResponder 源码(节选)来简单分析一下：

/*