只要在组件外面包一个Touchable组件就可以实现点击交互
一、高亮触摸 TouchableHighlight
当点击时,组件的透明度会改变,可以看到点击效果,TouchableHighlight只可以进行嵌套一层。 其常用属性如下:
activeOpacity 点击时,组件的透明度。 0-1
onHideUnderlay 当底层被隐藏时调用
onShowUnderlay 当底层显示时调用
style 风格
underlayColor 当点击组件时显示的颜色
<TouchableHighlight
underlayColor='#E1F6FF'
onPress = {()=>this.activeEvent('点击')}
// onPressIn = {()=>this.activeEvent('按下')}
// onPressOut = {()=>this.activeEvent('抬起')}
// onLongPress = {()=>this.activeEvent("长按")}>
<Text>点击</Text>
</TouchableHighlight>
二、不透明触摸 TouchableOpacity
activeOpacity 点击时,组件的透明度。 0-1
<TouchableOpacity activeOpacity={0.5}
onPress = {()=>this.activeEvent('点击')}
// onPressIn = {()=>this.activeEvent('按下')}
// onPressOut = {()=>this.activeEvent('抬起')}
// onLongPress = {()=>this.activeEvent("长按")}>
<Text>点击</Text>
</TouchableOpacity>
三、不反馈触摸,不会出现任何视觉变化 TouchableWithoutFeedback
<TouchableWithoutFeedback
onPress = {()=>this.activeEvent('点击')}
// onPressIn = {()=>this.activeEvent('按下')}
// onPressOut = {()=>this.activeEvent('抬起')}
// onLongPress = {()=>this.activeEvent("长按")}>
<Text>点击</Text>
</TouchableWithoutFeedback>