Touchable系列组件使用详解

《Touchable系列组件使用详解》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Touchable系列组件使用详解在做App开发过程中离不了的需要用户交互，说到交互，我们首先会想到的就是按钮了，在ReactNative中没有专门的按钮组件。为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，一下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。TouchableH

2、ighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。心得：以上四个组件，其中Touchab

3、leHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基础上做了一些扩展，我们从它们的源码中可以看出：TouchableHighlight：varTouchableHighlight=React.createClass({propTypes:{...TouchableWithoutFeedback.propTypes,TouchableOpacity：varTouchableOpacity=React.createClass({m

4、ixins:[TimerMixin,Touchable.Mixin,NativeMethodsMixin],propTypes:{...TouchableWithoutFeedback.propTypes,TouchableNativeFeedback:varTouchableNativeFeedback=React.createClass({propTypes:{...TouchableWithoutFeedback.propTypes,因为TouchableWithoutFeedback有其它三个组件的共同属性，所以我们先来学习一下

5、TouchableWithoutFeedback。TouchableWithoutFeedback使用详解TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。提示：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。接下来

6、让我们来看一下，TouchableWithoutFeedback有哪些常用的属性：TouchableWithoutFeedback常用的属性说到常用的属性TouchableWithoutFeedback首先要提到的就是onPress了。onPressfunction当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）。心得：onPress可谓是Touchable系列组件的最常用的属性之一了，如果你要让视图响应用户的单击事件，那么用onPress就可以了。接下来呢，我们就来使用onPress属性来实现一个统计按钮单

7、击次数的例子。{this.setState({count:this.state.count+1})}}>我是TouchableWithoutFeedback,单击我您单击了:{this.state.count}次

8、ext>下载源码TouchableWithoutFeedback_onPressonLongPressfunction当用户长时间按压组件(长按效果)的时候调用该方法。心得：onLongPress也是Tou