ReactNative中的手势响应系统

---

本人邮箱： [[email protected]](mailto: [email protected])，欢迎交流讨论.
欢迎转载：转载请注明网址：http://dwz.cn/3H9kbR
Github地址： https://github.com/eggswift/

---

Touchable

具体实现在ResponderEventPlugin.js，reactNative为我们提供了Touchable实现。

能做什么

• 反馈/高亮：让用户看到他们到底按到了什么东西，以及松开手后会发生什么。
• 取消功能：当用户正在触摸操作时，应该是可以通过把手指移开来终止操作。

TouchableHighlight

本组件用于封装视图。当按下时封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。

注意：TouchableHighlight只支持一个子节点，如果你需要设置多个子视图组件，就需要使用View节点进行包装。

属性

名称	注释
view#style	支持所有view#style属性
TouchableWithoutFeedback	支持TouchableWithoutFeedback 的所有属性
activeOpacity	高亮时view的不透明度。
onHideUnderlay	高亮隐藏时回调。
onShowUnderlay	高亮显示时回调。
underlayColor	高亮颜色

TouchableWithoutFeedback

你不需要主动去继承或直接使用TouchableWithoutFeedback组件。任何能够响应触摸或者点击的控件都应该有视觉上的反应效果。TouchableWithoutFeedback并不支持任何视觉反馈，这就是一个很大的原因，看起来像Web效果而不是原生的效果(Native)。

名称	类型	注释
accessibilityComponentType	View.AccessibilityComponentType	设置可访问的组件类型
accessibilityTraits	View.AccessibilityTraits	设置访问特征
accessible	bool	设置当前组件是否可以访问
delayLongPress	number	设置延迟的时间，单位为毫秒。从onPressIn方法开始，到 onLongPress被调用这一段时间
delayPressIn	number	设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间
delayPressOut	number	设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间
onLayout	function	当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}
onLongPress	function	当用户长时间按压组件(长按效果)的时候调用该方法
onPress	function	当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)
onPressIn	function	用户开始触摸组件回调方法
onPressOut	function	用户完成触摸组件之后回调方法
pressRetentionOffset	{top: ,left: ,bottom: ,right: }	该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候，该组件会重新进行响应。确保你传入一个常量来减少内存分配。

注意：TouchableWithoutFeedback 和 TouchableHighlight 一样只支持一个子节点，如果你需要设置多个子视图组件，就需要使用View节点进行包装。

示例

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Touchable,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    TouchableOpacity,
} from 'react-native';

class GestureDemo extends Component {

  render() {
    return (
      
        
          
        
      
    );
  }

  _onPressIn() {
    this.start = Date.now()
    console.log("press in")
  }
  _onPressOut() {
    console.log("press out")
  }
  _onPress() {
    console.log("press")
  }
  _onLongPress() {
    console.log("press long" + (Date.now() - this.start))
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5F5F5',
    },
    button: {
      width: 160,
      height: 160,
    },
    touchable: {
      backgroundColor: 'red',
      shadowColor: 'black',
      shadowRadius: 10,
      shadowOpacity: 0.3,
      shadowOffset: {width: 2, height: 2},
    },
});

AppRegistry.registerComponent('GestureDemo', () => GestureDemo);