本人郵箱： [lihao_iOS@hotmail.com](mailto: lihao_iOS@hotmail.com)，歡迎交流討論.
歡迎轉(zhuǎn)載：轉(zhuǎn)載請注明網(wǎng)址：http://dwz.cn/3H9kbR
Github地址： https://github.com/eggswift/

Touchable

具體實現(xiàn)在ResponderEventPlugin.js鸯隅，reactNative為我們提供了Touchable實現(xiàn)。

能做什么

• 反饋/高亮：讓用戶看到他們到底按到了什么東西米丘，以及松開手后會發(fā)生什么。
• 取消功能：當(dāng)用戶正在觸摸操作時糊啡，應(yīng)該是可以通過把手指移開來終止操作拄查。

TouchableHighlight

本組件用于封裝視圖。當(dāng)按下時封裝的視圖的不透明度會降低棚蓄，同時會有一個底層的顏色透過而被用戶看到堕扶，使得視圖變暗或變亮。在底層實現(xiàn)上梭依，實際會創(chuàng)建一個新的視圖到視圖層級中稍算，如果使用的方法不正確，有時候會導(dǎo)致一些不希望出現(xiàn)的視覺效果役拴。譬如沒有給視圖的backgroundColor顯式聲明一個不透明的顏色糊探。

注意：TouchableHighlight只支持一個子節(jié)點，如果你需要設(shè)置多個子視圖組件河闰，就需要使用View節(jié)點進(jìn)行包裝科平。

屬性

TouchableWithoutFeedback

你不需要主動去繼承或直接使用TouchableWithoutFeedback組件。任何能夠響應(yīng)觸摸或者點擊的控件都應(yīng)該有視覺上的反應(yīng)效果部念。TouchableWithoutFeedback并不支持任何視覺反饋汞贸，這就是一個很大的原因，看起來像Web效果而不是原生的效果(Native)印机。

注意：TouchableWithoutFeedback 和 TouchableHighlight 一樣只支持一個子節(jié)點温眉，如果你需要設(shè)置多個子視圖組件，就需要使用View節(jié)點進(jìn)行包裝翁狐。

示例

/**
 * 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);