标签：
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 }
标签：
原文地址：http://www.cnblogs.com/wujy/p/5846723.html
