本人邮箱： [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节点进行包装。

属性

TouchableWithoutFeedback

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

注意：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);