React-Native学习之路（五）Touchable系列组件

Touchable系列组件

2018年7月21日

11:14

• TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。
• TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
• TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
• TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

 

在这四个组件当中，其他三个都是继承自TouchableWithoutFeedback的。因此它有的方法属性，其他三个都拥有

共同点：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着

一、TouchableWithoutFeedback：

1）.onPress（）单击事件

2）.onLongPress（）长按事件

        通常用于响应长按的事件，如长按列表弹出删除对话框等。

3）.disabled

如果设为true，则禁止此组件的一切交互。

例如在登录时，我们可以防止用户多次点击而不断发送网络请求

4）.onPressIn和onPressOut

这两个方法分别是当用户开始点击按钮时与点击结束后被回调。

通过这两个方法我们可以计算出用户单击按钮所用的时长， 另外也可以做一些其它个性化的功能。

二、TouchableOpacity：

会在按下时降低透明度

三、TouchableHighlight：

在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。

在使用这个的时候一定要写onPress方法，空的也行，不然不会起作用

四、TouchableNativeFeedback：

在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。