React Native交互组件之Touchable

只要在组件外面包一个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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容