ReactNative 进阶(十九):React Native 按钮 Touchable 系列组件使用详解
一、前言
在做 RN App 开发过程中离不了用户交互,在React Native
中没有专门的按钮组件。
为了让视图能够响应用户的点击事件,需要借助Touchablexxx
组件来包裹视图。为什么说是Touchablexxx
呢,因为它不只是一个组件,而是一组组件,以下四个组件都可以用来包裹视图来响应用户的点击事件。
TouchableWithoutFeedback
:响应用户的点击事件,如果你想在处理点击事件的同时不显示任何视觉反馈,使用它是个不错的选择。
TouchableHighlight
:在TouchableWithoutFeedback
的基础上添加了当按下时背景会变暗的效果。
TouchableOpacity
:相比TouchableHighlight
在按下去会使背景变暗的效果,TouchableOpacity
会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。
TouchableNativeFeedback
:在Android
上还可以使用TouchableNativeFeedback
,它会在用户手指按下时形成类似水波纹的视觉效果。注意,此组件只支持Android
。
以上四个组件,其中TouchableHighlight
、TouchableOpacity
以及TouchableNativeFeedback
都是在TouchableWithoutFeedback
的基础上做了一些扩展,我们从它们的源码中可以看出:
TouchableHighlight:
TouchableOpacity:
TouchableNativeFeedback:
因为TouchableWithoutFeedback
有其它三个组件的共同属性,所以我们先来了解一下TouchableWithoutFeedback
。
二、TouchableWithoutFeedback 使用详解
TouchableWithoutFeedback
,Touchable
系列组件中最基本的一个组件,只响应用户的点击事件不会做任何UI
上的改变,在使用的过程中需要特别留意。
注意:无论是
TouchableWithoutFeedback
还是其他三种Touchable
组件,在根节点都是只支持一个组件,如果你需要多个组件同时相应单击事件,可以用一个View
将它们包裹着,它的这种根节点只支持一个组件的特性和ScrollView
很类似。
接下来,让我们来看一下TouchableWithoutFeedback
常用属性:
说到常用属性,TouchableWithoutFeedback
首先要提到的就是onPress
了。
onPress function 当触摸操作结束时调用,但如果被取消了则不调用(譬如响应者被一个滚动操作取代)。
onPress
可谓是Touchable
系列组件的最常用属性之一,如果要让视图响应用户的单击事件,那么用onPress
就可以了。
接下来,使用onPress
属性来实现一个统计按钮单击次数的例子。
onLongPress function 当用户长时间按压组件(长按效果)的时候调用该方法。
onLongPress
也是Touchable
系列组件的最常用的属性之一,通常用于响应长按的事件,如长按列表弹出删除对话框等。
接下来,使用onLongPress
属性来响应用户的长按事件。
我们在上面例子的基础上为Touchable
设置了onLongPress
属性,当用户长时间按压按钮是会弹出一个对话框。
当我们没有对Touchable
组件设置onLongPress
属性,而设置了onPress
属性的时候,我们长按按钮之后会回调onPress
方法。另外,我们也可以通过delayLongPress
方法来这设置从onPressIn
被回调开始,到onLongPress
被调用的延迟。
disabled bool 如果设为true
,则禁止此组件的一切交互。
disabled
也是Touchable
系列组件的最常用的属性之一,通常用于禁止按钮响应用户的点击事件,比如,当用户单击按钮进行登录时,需要进行网络请求,在请求操作完成之前,如果用户多次单击登录按钮,我们通常不希望发起多次登录请求,这个时候就可以借助disabled
属性来禁用按钮的交互。
接下来呢,我们就应用模拟用户登录的例子来介绍一下disabled
的使用。
在上面例子中我们模拟了用户登录的效果,默认状态下按钮是可以响应用户点击事件的,在正在登录过程中,我们通过disabled
属性来禁用按钮,这时无论是单击还是长按按钮都是没有任何响应的,在停隔 2s 后,我们又将按钮解除禁用,这时按钮又可以重新响应用户的点击事件了。当用户长时间按压按钮时会弹出一个对话框。
想禁用按钮,但是通过设置Touchable
的accessible
属性为false
没有效果,这是因为即使accessible
为false
的情况下,Touchable
组件还是可以响应交互事件的,要想禁用Touchable
的交互事件,只能通过disabled
属性。
onPressIn function 与 onPressOut function 这两个方法分别是当用户开始点击按钮时与点击结束后被回调。
通过这两个方法我们可以计算出用户单击按钮所用的时长, 另外也可以做一些其它个性化的功能。现在我们将通过一个例子来计算出用户点击按钮所用的时长。
在上述例子中我们记录下用户单击按钮的时间戳,当单击结束后我们获取当前时间减去刚单击时的时间,它们的差值就是用户单击按钮所用的时间了。
另外,我们也可以通过delayPressIn
与delayPressOut
两个方法来分别设置,从用户点击按钮到onPressIn
被回调的延时与从点击结束到onPressOut
被回调时的延时。
三、TouchableHighlight 使用详解
TouchableHighlight
是Touchable
系列组件中比较常用的一个,它是在TouchableWithoutFeedback
的基础上添加了一些UI
上的扩展,既当手指按下的时候,该视图的不透明度会降低,同时会看到相应的颜色(视图变暗或者变亮),从TouchableHighlight
源码中我们可以看出,其实这个颜色就是在TouchableHighlight
的最外层添加了一个View
,通过改变这个View
的背景色及透明度来达到这一效果。
TouchableHighlight
所扩展出来的属性
activeOpacity number 我们可以通过activeOpacity
来设置TouchableHighlight
被按下时的不透明度,从TouchableHighlight
的源码中可以看出,它的默认不透明度为0.85
,可以根据需要进行调节。
underlayColor color 可以通过underlayColor
属性来设置TouchableHighlight
被按下去的颜色,默认状态下为black
黑色。
onHideUnderlay function 当衬底(也就是上文讲到的最外层的View
)被隐藏的时候调用。
通常情况下,当手指结束点击时衬底会被隐藏。
onShowUnderlay function 当衬底(也就是上文讲到的最外层的 View)显示的时候调用。
通常情况下,当手指刚开始点击时衬底会显示。
style View#style 因为TouchableHighlight
的最外层个添加了一个View
,所以我们可以设置这个View
的样式来做出一个形形色色的按钮。
接下来,我们通过一个例子来看一下这些属性的使用。
四、TouchableOpacity 使用详解
TouchableOpacity
也是Touchable
系列组件中比较常用的一个,它是在TouchableWithoutFeedback
的基础上添加了一些UI
上的扩展,但这些扩展相比TouchableHighlight
少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击。
TouchableOpacity
所扩展出来的属性
在扩展属性方面TouchableOpacity
相比TouchableHighlight
,就少了很多,只有一个activeOpacity
,来设置按下去的透明度。
activeOpacity number 同TouchableHighlight
的activeOpacity
。
另外,我们也可以通过TouchableOpacity
的setOpacityTo
(value
, duration
)方法来动态修改TouchableOpacity
被按下去的不透明度。
五、TouchableNativeFeedback 使用详解
为了支持Android5.0
新增的触控反馈,React Native
加入了TouchableNativeFeedback
组件,TouchableNativeFeedback
在TouchableWithoutFeedback
所支持的属性的基础上增加了按下去的水波纹效果。可以通过background
属性来自定义原生触摸操作反馈的背景。
TouchableNativeFeedback
所扩展出来的属性
background backgroundPropType 决定在触摸反馈的时候显示什么类型的背景。它接受一个有着 type 属性和一些基于 type 属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象:
TouchableNativeFeedback.SelectableBackground()
- 会创建一个对象,表示安卓主题默认的对于被选中对象的背景。
TouchableNativeFeedback.SelectableBackgroundBorderless()
- 会创建一个对象,表示安卓主题默认的对于被选中的无边框对象的背景。只在Android API level 21+
适用。
TouchableNativeFeedback.Ripple(color, borderless)
- 会创建一个对象,当按钮被按下时产生一个涟漪状的背景,你可以通过color
参数来指定颜色,如果参数borderless
是true
,那么涟漪还会渲染到视图的范围之外。(参见原生actionbar buttons
作为该效果的一个例子)。这个背景类型只在Android API level 21+
适用,也就是Android5.0
或以上设备。
六、延伸阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/92880cdc9e29931f70eb560d1】。文章转载请联系作者。
评论