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 : 点击时背景阴影效果的颜色
详细效果,大家运行一下上边的代码即可
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。