首页 > 代码库 > React Native知识5-Touchable类组件
React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件，前面我们已经知道Text组件有onPress事件，为了给其他组件
也绑定点击事件，React Native提供了3个组件来做这件事。
1.TouchableHighlight：高亮触摸，用户点击时，会产生高亮效果。
2.TouchableOpacity：透明触摸。用户点击时，点击的组件会出现透明效果。
3.TouchableWithoutFeedback：无反馈性触摸。用户点击时无任何视觉效果。
注意：只支持一个子节点,如果你希望包含多个子组件，用一个View来包装它们。
一：TouchableHighlight
1：当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。
常用属性：
1.1：activeOpacity number
设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)
1.2：onHideUnderlay function 方法
当底层被隐藏的时候调用
1.3：onShowUnderlay function 方法
当底层显示的时候调用
1.4：style
可以设置控件的风格演示，该风格演示可以参考View组件的style
1.5：underlayColor
当触摸或者点击控件的时候显示出的颜色
2：实例代码
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight} from ‘react-native‘;class ReactNativeProject extends Component { _show(text) { alert(text); } render() { return ( <View style={styles.container}> <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> ); }}const styles = StyleSheet.create({ container: { flex: 1, marginTop:64 }, item: { fontSize:18, marginLeft:5, color:‘#434343‘ }});AppRegistry.registerComponent(‘ReactNativeProject‘, () => ReactNativeProject);效果图：
二：不透明触摸 TouchableOpacity
1：该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。该组件不用设置背景色，这样使用起来更方便；
常用属性：
activeOpacity number
设置当用户触摸的时候，组件的透明度
2：实例代码
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight, TouchableOpacity} from ‘react-native‘;class ReactNativeProject extends Component { _show(text) { alert(text); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this._show.bind(this,‘React Native‘)} activeOpacity={0.5}> <Text style={styles.item}>React Native</Text> </TouchableOpacity> <TouchableOpacity onPress={this._show.bind(this,‘点击效果‘)} activeOpacity={0.9}> <Text style={styles.item}>点击效果</Text> </TouchableOpacity> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, marginTop:64 }, item: { fontSize:18, marginLeft:5, color:‘#434343‘ }});AppRegistry.registerComponent(‘ReactNativeProject‘, () => ReactNativeProject);效果图：
三：TouchableWithoutFeedback
除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈）。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。TouchableWithoutFeedback只支持一个子节点，如果你希望包含多个子组件，用一个View来包装它们。
四：知识点
1：react native 代参bind this 的两种方式（如果不用bind，事件会在加载时马上就执行了）
第一种带参数 bind this的方式（使用箭头方法）
<TouchableOpacity onPress={(e) => this._needHandlderArgument(e,argument)} underlayColor=‘#00EE76‘> </TouchableOpacity >
_needHandlderArgument(e, argument) { // 只处理argument e用于绑定this}
第二种带参数 bind this的方式（直接带参bind）
<TouchableOpacity onPress={this._needHandlderArgument.bind(this,argument)} underlayColor=‘#00EE76‘> </TouchableOpacity >
_needHandlderArgument(argument) { // 只处理argument }
React Native知识5-Touchable类组件