本人邮箱： [lihao_iOS@hotmail.com](mailto: lihao_iOS@hotmail.com)，欢迎交流讨论.
欢迎转载：转载请注明网址：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 (
<View style = {styles.container}>
<TouchableHighlight style={styles.touchable}
activeOpacity={0.3}
underlayColor={'#FF00FF'}
onPressIn={this._onPressIn}
onPressOut={this._onPressOut}
onPress={this._onPress}
onLongPress={this._onLongPress}>
<View style={styles.button}></View>
</TouchableHighlight>
</View>
);
}
_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);
