React Native（iOS）新手小白零基础自学（五）Tou

React Native 没有像web那样可以给元素绑定click事件，前面我们已经知道Text组件有onPress事件，为了给其他组件
也绑定点击事件，React Native提供了3个组件来做这件事。

1.TouchableHighlight：高亮触摸，用户点击时，会产生高亮效果。
2.TouchableOpacity：透明触摸。用户点击时，点击的组件会出现透明效果。
3.TouchableWithoutFeedback：无反馈性触摸。用户点击时无任何视觉效果。

一、TouchableHighlight组件
基本属性如下：

/*
  activeOpacity:触摸时透明度的设置。
  onHideUnderlay：隐藏背景阴影时触发改事件。
  onShowUnderlay：出现背景阴影时触发该事件。
  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入门与实战')}
            underlayColor='#E1F6FF'>
            <Text style={styles.item}>React Native入门与实战</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：触摸释放事件