React Native常用组件之Touchable

2016-03-01 23:09小小哆iOSDev,React Native相关评论(0)

在前面的登录界面中,我们发现所有的组件不会对用户的点击、触摸、拖拽做出合适的响应,这是十分不友好的。那么,在React Native中如何让视图对触发做出合适的响应呢?

一、高亮触摸 TouchableHighlight

当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View。此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套。
常用属性:

  • activeOpacity number

    • 设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)
  • onHideUnderlay function 方法

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

    • 当底层显示的时候调用
  • style

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

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

代码演示:
1.png

二、不透明触摸 TouchableOpacity

该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。
常用属性:

  • activeOpacity number

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

三、常见的触摸事件

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

上一篇 React Native常用组件之TextInputXcode插件管理工具——Alcatraz的安装和使用 下一篇
评论 0
由于之前使用多说插件出现问题,导致以前的评论丢失,在此深表歉意!

站点统计

  • 建站日期:2014-12-06
  • 最后更新:2016-05-19
  • 运行时间:1906 天
  • 文章数量:46 篇