React Native - Touchable类组件的使用详解（实现Button按钮）

2017-02-16 发布：hangge 阅读：5749

React Native 没有专门的 Button 组件，也不像 Web 开发那样可以给元素（组件）绑定 click 事件。我们知道 Text 组件有 onPress 事件，可以给 Text 组件绑定触摸点击事件。为了让其他组件可以被点击，同时点击时有视觉变化的效果，React Native 提供了4个“Touchable类组件”供我们使用（其中最后一个是 Android 专有的），具体如下：

TouchableHighlight：高亮触摸。用户点击时，会产生高亮效果。
TouchableOpacity：透明触摸。用户点击时，点击的组件会出现透明过渡效果。
TouchableWithoutFeedback：无反馈性触摸。用户点击时，点击的组件不会出现任何视觉变化。
TouchableNativeFeedback：Android 系统专用组件。用户点击时会有一种名为涟漪（ripple）的触摸效果。

通过 Touchable 类组件与 Text、View 或 Image 组件的结合使用，我们可以很方便地实现各种不同样式的按钮。下面分别对这 4 个 Touchable 类组件进行介绍。

一、TouchableHighlight组件

TouchableHighlight 组件在点击的时候会有一些视觉上的变化。这样。通过视觉的变化告诉我们按钮已经点击过了，从而避免重复点击。

1，组件属性

activeOpacity：触摸时透明度（默认为 0.8。如果希望做到与 iOS 原生按钮相同的效果，需要将其设为 0.85）
onHideUnderlay：隐藏背景阴影时触发该事件。
onShowUnderlay：出现背景阴影时触发该事件。
underlayColor：点击时背景阴影效果的背景颜色。

2，效果图

（1）Text 默认颜色为深灰色，并在 Text 上添加一个 TouchableHighlight 组件。

（2）按下 Text 时出现淡蓝色背景，同时文字颜色变淡。

（3）松开后背景和文字恢复原样，同时弹出消息框。

3，样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableHighlight onPress={this.show.bind(this,'做最好的开发者知识平台')}
            underlayColor="#E1F6FF">
                <Text style={styles.item}>欢迎访问hangge.com</Text>
          </TouchableHighlight>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  item:{
    fontSize:18,
    marginLeft:10,
    color:'#434343'
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

二、TouchableOpacity组件

TouchableOpacity 组件只有一个 activeOpacity 属性，不用设置背景颜色，所以使用起来更加方便。

1，效果图

（1）通过 TouchableOpacity 组件结合 View 和 Text 实现一个蓝色的圆形按钮。

（2）按下按钮后，按钮变半透明。

（3）松开后按钮恢复原样，同时弹出消息框。

2，样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableOpacity onPress={this.show.bind(this,'做最好的开发者知识平台')}>
            <View style={styles.btn}>
              <Text style={{fontSize:16, color:'#fff'}}>hangge.com</Text>
            </View>
          </TouchableOpacity>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  btn:{
    marginLeft:30,
    marginTop:30,
    width:100,
    height:100,
    backgroundColor:'#18B4FF',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:50,
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

三、TouchableWithoutFeedback组件

看名字就知道，TouchableWithoutFeedback 组件是没有任何触摸反馈的。所以像官网上说的那样，除非有很充足的理由，否则不要使用这个组件。

1，组件普通属性

这些属性，不仅 TouchableWithoutFeedback 组件有，TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback 组件上也是可用的。

delayLongPress：用来设置按了多少毫秒后，onLongPress 事件会被激活。（默认值：500ms）
delayPressIn：用来设置手指接触屏幕多少毫秒后，onPressIn 事件会被激活。（默认值：0）
delayPressOut：用来设置手指离开屏幕多少毫秒后，onPressOut 事件会被激活。（默认值：0）

2，组件事件属性

这些属性，不仅 TouchableWithoutFeedback 组件有，TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback 组件上也是可用的。

onLongPress：长按事件
onPressIn：触摸进入事件
onPressOut：触摸释放事件
onPress：触摸点击事件

3，效果图

（1）按钮按下、松开、长按时上面的文字会发生变化，同时点击结束后会弹出提示框。

（2）由于使用的是 TouchableWithoutFeedback，所以在交互时按钮是没有动态效果的。

4，样例代码

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback
} from 'react-native';

//默认应用的容器组件
class App extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            text: 'hangge.com'
        };
    }
    show(text) {
        alert(text);
    }
    render() {
        return (
            <View style={styles.flex}>
                <TouchableWithoutFeedback
                  onLongPress={() => this.setState({text: "长按"})}
                  onPressIn={() => this.setState({text: "按下"})}
                  onPressOut={() => this.setState({text: "松开"})}
                  onPress={this.show.bind(this, '做最好的开发者知识平台')}>
                    <View style={styles.btn}>
                        <Text style={{fontSize: 16,color: '#fff'}}>
                          {this.state.text}
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 30
    },
    btn: {
        marginLeft: 30,
        marginTop: 30,
        width: 100,
        height: 100,
        backgroundColor: '#18B4FF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50
    }
});

AppRegistry.registerComponent('HelloWorld', () => App);

四、TouchableNativeFeedback 组件

TouchableNativeFeedback 是 Android 操作系统专用组件。它使用原生视图的响应状态来展示触摸事件的视觉效果。主要用来做出 Android 特有的一种名为涟漪（ripple）的触摸效果。

1，组件属性

主要设置的是 background 属性，TouchableNativeFeedback.Ripple 函数接收两个参数：

第 1 个参数：按下时按钮改变的颜色。
第 2 个参数：涟漪效果是否被限制在 TouchableNativeFeedback 的显示区域。

2，效果图

下面是按钮为按下前的效果。而按下后的涟漪效果是一种动画效果，不方便截图，建议运行查看。

3，样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableNativeFeedback
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     //alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableNativeFeedback onPress={this.show.bind(this,'做最好的开发者知识平台')}
            background={TouchableNativeFeedback.Ripple('blue',false)}>
            <View style={styles.btn}>
              <Text style={{fontSize:16, color:'#fff'}}>hangge.com</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  btn:{
    marginLeft:30,
    marginTop:30,
    width:100,
    height:60,
    backgroundColor:'#18B4FF',
    justifyContent:'center',
    alignItems:'center',

  }
});

AppRegistry.registerComponent('HelloWorld', () => App);