美文网首页React Native
React Native之常用Touchable系列组件

React Native之常用Touchable系列组件

作者: 闲得一B | 来源:发表于2016-04-26 01:56 被阅读33次
    组件不会对用户的点击、触摸、拖拽做出合适的响应,这是十分不友好的。
    那么,在React Native中如何让视图对触发做出合适的响应呢?
    

    一、高亮触摸 TouchableHighlight

    当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,
    其实现原理则是在底层新添加了一个View。此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套。
    常用属性:
    activeOpacity number
    设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)

    onHideUnderlay function 方法
    当底层被隐藏的时候调用

    onShowUnderlay function 方法
    当底层显示的时候调用

    style
    可以设置控件的风格演示,该风格演示可以参考View组件的style

    underlayColor
    当触摸或者点击控件的时候显示出的颜色

    代码演示:

    ![1.jpeg](http:https://img.haomeiwen.com/i1170347/3b82732b638e95c3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ---
    #####二、不透明触摸  TouchableOpacity
    
    该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。
     常用属性:
    

    activeOpacity number
    设置当用户触摸的时候,组件的透明度

    
    ---
    #####三、常见的触摸事件
    >```
            在开发中会经常的用到点击、按下、抬起、长按等触发事件,那么在TouchableOpacity中又是改如何展示呢?
          在下面代码中分别演示了如何添加各种触摸事件:
    
    2.jpeg

    相关文章

      网友评论

        本文标题:React Native之常用Touchable系列组件

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