React Native

React Native交互组件之Touchable

2017-11-16  本文已影响0人  代码森林中的一只猫

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

上一篇 下一篇

猜你喜欢

热点阅读