React Native-9.React Native Touchable组件详解
Touchable系列组件简介RN中没有web中给元素绑定click事件的机制,但是在上一节中我们知道Text组件中我们可以绑定 代码'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);
详细效果,大家运行一下上边的代码即可(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |