React Native按钮详解|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: {
    ...TouchableWithoutFeedback.propTypes,

TouchableOpacity：

var TouchableOpacity = React.createClass({
  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],

  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

TouchableNativeFeedback:

var TouchableNativeFeedback = React.createClass({
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

因为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>

下载源码

onLongPress function

当用户长时间按压组件(长按效果)的时候调用该方法。

心得：onLongPress也是Touchable系列组件的最常用的属性之一，通常用于响应长按的事件，如长按列表弹出删除对话框等。

接下来呢，我们就来使用onLongPress属性来响应用户的长按事件。

<TouchableWithoutFeedback
    onPress={()=> {
    
    
        this.