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 : 点击时背景阴影效果的颜色

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