React Native 沒有像web那樣可以給元素綁定click事件，前面我們已經(jīng)知道Text組件有onPress事件，為了給其他組件
也綁定點擊事件，React Native提供了3個組件來做這件事。

1.TouchableHighlight：高亮觸摸，用戶點擊時，會產(chǎn)生高亮效果。
2.TouchableOpacity：透明觸摸。用戶點擊時，點擊的組件會出現(xiàn)透明效果。
3.TouchableWithoutFeedback：無反饋性觸摸。用戶點擊時無任何視覺效果。

一、TouchableHighlight組件
基本屬性如下：

/*
  activeOpacity:觸摸時透明度的設(shè)置。
  onHideUnderlay：隱藏背景陰影時觸發(fā)改事件。
  onShowUnderlay：出現(xiàn)背景陰影時觸發(fā)該事件。
  underlayColor：點擊時背景陰影效果的背景顏色。
*/

通過一個簡單的例子來看看效果

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableHighlight
} = React;

var TH = React.createClass ({

  show: function(text) {
    alert(text);
  },

  render: function() {
    return (
      <View style={styles.flex}>
        <View>
          <TouchableHighlight
            onPress={this.show.bind(this, 'React Native入門與實戰(zhàn)')}
            underlayColor='#E1F6FF'>
            <Text style={styles.item}>React Native入門與實戰(zhàn)</Text>
          </TouchableHighlight>

          <TouchableHighlight
            onPress={this.show.bind(this, '圖靈出版社')}
            underlayColor='#E1F6FF'>
            <Text style={styles.item}>圖靈出版社</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  },
});

var styles = StyleSheet.create ({
  flex: {
    flex:1,
    marginTop:25
  },
  item: {
    fontSize:18,
    marginLeft:5,
    color:'#434343'
  }
});

AppRegistry.registerComponent('InformationServicesRN', () => TH);

效果如下：

屏幕快照 2016-05-09 上午10.19.19.png

二、TouchableOpacity

//添加組件
<TouchableOpacity>
  <View style={styles.btn}>
    <Text style={styles.btnText}>按鈕</Text>
  </View>
</TouchableOpacity>

//添加樣式
 btn: {
    marginLeft:30,
    marginTop:30,
    width:100,
    height:100,
    backgroundColor:'#18B4FF',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:50  //圓角
  },
  btnText: {
    fontSize:25,
    color:'#fff'
  }

效果圖如下：

屏幕快照 2016-05-09 上午10.29.46.png

三、TouchableWithoutFeedback 一般不推薦使用，簡單介紹下屬性：

onLongPress：長按事件
onPressIn：觸摸進入事件
onPressOut：觸摸釋放事件