Touchable系列组件使用详解.doc

Touchable系列组件使用详解 在做App开发过程中离不了的需要用户交互，说到交互，我们首先会想到的就是按钮了，在React Native中没有专门的按钮组件。 为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，一下四个组件都可以用来包裹视图来响应用户的点击事件。 TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。 TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。 TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。 TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。 心得：以上四个组件，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基础上做了一些扩展，我们从它们的源码中可以看出： TouchableHighlight： var TouchableHighlight = React.createClass({ propTypes: { ...TouchableWithoutFpTypes, TouchableOpacity： var TouchableOpacity = React.createClass({ mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin], propTypes: { ...TouchableWithoutFpTypes, TouchableNativeFeedback: var TouchableNativeFeedback = React.createClass({ propTypes: { ...TouchableWithoutFpTypes, 因为TouchableWithoutFeedback有其它三个组件的共同属性，所以我们先来学习一下TouchableWithoutFeedback。 TouchableWithoutFeedback使用详解 TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。 提示：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。 接下来让我们来看一下，TouchableWithoutFeedback有哪些常用的属性： TouchableWithoutFeedback常用的属性 说到常用的属性TouchableWithoutFeedback首先要提到的就是onPress了。 onPress function 当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）。 心得：onPress可谓是Touchable系列组件的最常用的属性之一了，如果你要让视图响应用户的单击事件，那么用onPress就可以了。 接下来呢，我们就来使用onPress属性来实现一个统计按钮单击次数的例子。 TouchableWithoutFeedback onPress={()= { this.setState({count: this.state.count+1}) }} View style={styles.button} Text style={styles.buttonText} 我是TouchableWithoutFeedback,单击我 /Text /View /TouchableWithoutFeedback Text style={styles.text}您单击了:{this.state.count}次/Text 下载源码 Touch