react-native Touch事件的拦截与分发

单组件触摸事件处理

在React Native中，响应手势的基本单位是responder，具体来说，就是最常见的View组件。任何的View组件，都是潜在的responder，如果某个View组件没有响应手势操作，那是因为它还没有被“开发”。

将一个普通的View组件开发成为一个能响应手势操作的responder，非常简单，只需要按照React Native的gesture responder system的规范，在props上设置几个方法即可。具体如下：

View.props.onStartShouldSetResponder
View.props.onMoveShouldSetResponder
View.props.onResponderGrant
View.props.onResponderReject
View.props.onResponderMove
View.props.onResponderRelease
View.props.onResponderTerminationRequest
View.props.onResponderTerminate

乍看之下，这几个方法名字又长有奇怪，但是当了解了React Native对手势响应的流程之后，记忆这几个方法也非常容易。

要理解React Native的手势操作过程，首先要记住一点：
一个React Native应用中只能存在一个responder

正因为如此，gesture responder system中才存在_reject和_terminate方法。React Native事件响应的基本步骤如下：

1.用户通过触摸或者滑动来“激活”某个responder，这个步骤由View.props.onStartShouldSetResponder以及View.props.onMoveShouldSetResponder这两个方法负负责处理，如果返回值为true，则表示这个View能够响应触摸或者滑动手势被激活；

2.如果组件被激活，View.props.onResponderGrant方法被调用，一般来说，这个时候需要去改变组建的底色或者透明度，来表示组件已经被激活；

3.接下来，用户开始滑动手指，此时View.props.onResponderMove方法被调用；

4.当用户的手指离开屏幕之后，View.props.onResponderRelease方法被调用，此时组件恢复被触摸之前的样式，例如底色和透明度恢复之前的样式，完成一次手势操作；

综上所述，一次正常的手势操作的流程如下所示：
响应touch或者move手势 -> grant（被激活） -> move -> release(结束事件)

来段简单的示例代码：

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback
} from 'react-native';
import { Navigation } from 'react-native-navigation';
/**
 * 验证父View与子View事件的分发与拦截（有图有真相）
 */
class TouchViewScreen extends Component {
   
  static navigatorStyle = {
    drawUnderNavBar: