一、前言
移动应用上的用户交互基本靠点击,触摸。React Native提供了可以处理常见触摸手势例如点击或者滑动的组件,以及可以用于识别更复杂的手势的完整手势响应链。
这边文章主要讲解一下,关于点击的组件。点击的组件是使用“Touchable”开头的一系列组件,通过onPress属性来接受一个点击的处理函数。
二、系列组件的区别与应用场景。
2.1用户视觉效果
Touchablehlight 此组件的背景会在用户手指按下时变暗 一般应用于按钮或者链接
TouchableNativeFeedBack ( 仅限于android) 用户手指按下时形成类似水墨涟漪的视觉效果 多用于在处理点击事件时同时不显示任何视觉效果
TouchableOpcity 此组件会在用户手指按下时降低按钮的透明度 不会改变背景颜色
2.2各组件的属性:
Touchablehlight
在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。只能进行一层嵌套,不能多嵌套。
activeOpacity
number 设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)
onHideUnderlay
function 方法
当底层被隐藏的时候调用
onShowUnderlay
function 方法
当底层显示的时候调用
style
可以设置控件的风格演示,该风格演示可以参考View组件的style
underlayColor
当触摸或者点击控件的时候显示出的颜色
三、运行demo
3.1 Touchablehlight
运行结果:
3.2TouchableOpacity
運行結果: