React Native－9.React Native Touchable组件详解

Touchable系列组件简介

RN中没有web中给元素绑定click事件的机制，但是在上一节中我们知道Text组件中我们可以绑定onPress事件来触发点击事件，为了像Text组件那样使得其它组件可被点击，RN提供了3个组件来做这个事情：
- TouchableOpacity: 透明触摸，点击时点击的组件会出现透明的偷渡效果。
- TouchableWithoutFeedback: 无反馈性触摸，用户点击时没有任何反应。
- TouchableHighLight: 高亮触摸，点击时点击的组件会出现高亮效果。

代码

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

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,

} = React;

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

var wxsPrj = React.createClass({
  show: function(text) {
    alert(text);
  },

  render: function() {
    return (
        <View style = {[styles.flex]}>
            <View>
                <TouchableHighlight 
                    onPress= {this.show.bind(this,'TouchableHightlight 测试')}
                    underlayColor = '#f4d231'>
                    <Text style = {[styles.item]}>
                        TouchableHightlight 测试
                    </Text>
                </TouchableHighlight>
            </View>
            <View>
                <TouchableOpacity
                    onPress = {this.show.bind(this,'TouchableOpacity 测试')}>
                    <Text style = {[styles.item]}>TouchableOpacity 测试</Text>
                    </TouchableOpacity>
            </View>
            <View>
                <TouchableWithoutFeedback
                    onLongPress = {this.show.bind(this,'TouchableWithoutFeedback onLongPress')}>
                    <Text style = {[styles.item]}>
                        TouchableWithoutFeedback onLongPress
                    </Text>
                </TouchableWithoutFeedback>
            </View>
        </View>
        );
    }
})

AppRegistry.registerComponent('wxsPrj', () => wxsPrj);

代码详解
- onPress : 点击时触发
- onLongPress : 长按时触发
- onPressIn : 触摸进入事件
- onPressOut : 触摸释放事件

在TouchableHighLight组件中：
- activeOpacity: 触摸时透明度的设置
- onHideUnderlay : 隐藏背景阴影时触发的事件
- onShowUnderlay : 显示背景阴影时触发的事件
- underlayColor : 点击时背景阴影效果的颜色

详细效果，大家运行一下上边的代码即可