React Native从入门到深入三--可点击事件Touchable组件

一、前言

移动应用上的用户交互基本靠点击，触摸。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

運行結果：