React Native交互组件之Touchable

只要在组件外面包一个Touchable组件就可以实现点击交互

一、高亮触摸 TouchableHighlight

当点击时,组件的透明度会改变,可以看到点击效果,TouchableHighlight只可以进行嵌套一层。 其常用属性如下:
activeOpacity 点击时,组件的透明度。 0-1
onHideUnderlay 当底层被隐藏时调用
onShowUnderlay 当底层显示时调用
style 风格
underlayColor 当点击组件时显示的颜色

 this.activeEvent('点击')} 
  // onPressIn = {()=>this.activeEvent('按下')} 
  // onPressOut = {()=>this.activeEvent('抬起')}  
  // onLongPress = {()=>this.activeEvent("长按")}>
    点击
 

二、不透明触摸 TouchableOpacity

activeOpacity 点击时,组件的透明度。 0-1

this.activeEvent('点击')}
   // onPressIn = {()=>this.activeEvent('按下')} 
   // onPressOut = {()=>this.activeEvent('抬起')}
   // onLongPress = {()=>this.activeEvent("长按")}>
     点击 


三、不反馈触摸,不会出现任何视觉变化 TouchableWithoutFeedback

 this.activeEvent('点击')} 
  // onPressIn = {()=>this.activeEvent('按下')} 
  // onPressOut = {()=>this.activeEvent('抬起')}  
  // onLongPress = {()=>this.activeEvent("长按")}>
    点击
 

你可能感兴趣的:(React Native交互组件之Touchable)