美文网首页React Native
React Native交互组件之Touchable

React Native交互组件之Touchable

作者: 代码森林中的一只猫 | 来源:发表于2017-11-16 14:47 被阅读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>
    
    

    相关文章

      网友评论

        本文标题:React Native交互组件之Touchable

        本文链接:https://www.haomeiwen.com/subject/wnvlvxtx.html