React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件
也绑定点击事件,React Native提供了3个组件来做这件事。
1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果。
2.TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明效果。
3.TouchableWithoutFeedback:无反馈性触摸。用户点击时无任何视觉效果。
一、TouchableHighlight组件
基本属性如下:
/*
activeOpacity:触摸时透明度的设置。
onHideUnderlay:隐藏背景阴影时触发改事件。
onShowUnderlay:出现背景阴影时触发该事件。
underlayColor:点击时背景阴影效果的背景颜色。
*/
通过一个简单的例子来看看效果
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight
} = React;
var TH = React.createClass ({
show: function(text) {
alert(text);
},
render: function() {
return (
<View style={styles.flex}>
<View>
<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>
</View>
);
},
});
var styles = StyleSheet.create ({
flex: {
flex:1,
marginTop:25
},
item: {
fontSize:18,
marginLeft:5,
color:'#434343'
}
});
AppRegistry.registerComponent('InformationServicesRN', () => TH);
效果如下:
二、TouchableOpacity
//添加组件
<TouchableOpacity>
<View style={styles.btn}>
<Text style={styles.btnText}>按钮</Text>
</View>
</TouchableOpacity>
//添加样式
btn: {
marginLeft:30,
marginTop:30,
width:100,
height:100,
backgroundColor:'#18B4FF',
justifyContent:'center',
alignItems:'center',
borderRadius:50 //圆角
},
btnText: {
fontSize:25,
color:'#fff'
}
效果图如下:
三、TouchableWithoutFeedback 一般不推荐使用,简单介绍下属性:
onLongPress:长按事件
onPressIn:触摸进入事件
onPressOut:触摸释放事件