React Native学习之Touchable类组件

React Native没有像Web开发那样给元素绑定click事件，前面讲的Text组件有onPress事件回调，View组件是没有的，但是在实际项目开发中，很多其他的组件也是需要可以被点击的，RN提供了3个组件来赋予被点击的能力（去包裹其他组件即可），这3个组件被称为“Touchable类组件”。

TouchableHighlight 高亮

属性：activeOpacity(设置透明度)、onHideUnderlay、onShowUnderlay、underlayColor(点击时背景阴影效果的背景颜色)

TouchableOpacity 透明度

属性：activeOpacity

TouchableWithoutFeedback 无反馈 不会出现任何视觉变化

属性：onLongPress、onPressIn、onPressOut，不建议使用

在app中我们希望点击的时候会有一些视觉上的变化，这个变化会提醒我们已经点击过了，从而避免重复点击

源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    TouchableHighlight,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from 'react-native';

var onePT = 1 / PixelRatio.get();

class RNAPP extends Component {
    render() {
        return (
            <View style={styles.flex}>
                <TouchableHighlight onPress={this.show.bind(this, '欢迎学习React Native技术')} underlayColor='#E1F6FF'>
                    <Text style={styles.item}>欢迎学习React Native技术-TouchableHighlight</Text>
                </TouchableHighlight>

                <TouchableOpacity onPress={this.show.bind(this, '欢迎学习React Native技术')}>
                    <Text style={styles.item}>欢迎学习React Native技术-TouchableOpacity</Text>
                </TouchableOpacity>

                <TouchableWithoutFeedback onPress={this.show.bind(this, '欢迎学习React Native技术')}>
                    <Text style={styles.item}>欢迎学习React Native技术-TouchableWithoutFeedback</Text>
                </TouchableWithoutFeedback>
        </View>
        );
    }

    show(txt){
        alert(txt);
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
        marginTop:25,
    },

    item:{
        fontSize:18,
        color:'#434343',
        marginLeft:5,
        marginTop:10,
    },
});

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