React Native 其他组件之 Touchable 系列组

React Native 提供了4个“ Touchable 系列组件”供我们使用（其中最后一个是 Android 专有的），具体如下：

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

TouchableHighlight

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。

属性

名称	类型	说明
activeOpacity	number	指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间，默认值为0.85）。
onHideUnderlay	function	底层的颜色被隐藏的时候调用。
onShowUnderlay	function	当底层的颜色被显示的时候调用。
underlayColor	color	有触摸操作时显示出来的底层的颜色。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight
} from 'react-native';
export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  _onPress = () => { 
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          style={styles.button}
          onPress ={this._onPress}
        >
          <Text style={styles.buttonText}>点击</Text>
        </TouchableHighlight>

        <View style={styles.countContainer}>
          <Text style ={styles.countText}>
            {this.state.count !== 0 ? this.state.count:null}
          </Text>
        </View>       
        </View>
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal:10,
    backgroundColor: 'white'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#1FB9FF',
    padding:10
  },
  buttonText: {
   color:'white'
  },
  countContainer: {
    alignItems: 'center',
    padding:10
  },
  countText: {
    color:'green'
  }
});

2. 效果图

touchable01.jpg

TouchableOpacity

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。

属性

名称	类型	说明
activeOpacity	number	指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间）。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity
} from 'react-native';
export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  _onPress = () => { 
    this.setState({
      count: this.state.count + 1
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress ={this._onPress}
        >
          <Text style={styles.buttonText}>点击</Text>
        </TouchableOpacity>

        <View style={styles.countContainer}>
          <Text style ={styles.countText}>
            {this.state.count !== 0 ? this.state.count:null}
          </Text>
        </View>       
        </View>
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal:10,
    backgroundColor: 'white'
  },
  button: {
    marginLeft: 30,
    marginTop: 30,
    width: 100,
    height: 100,
    backgroundColor: '#18B4FF',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
  },
  buttonText: {
   color:'white'
  },
  countContainer: {
    alignItems: 'center',
    padding:10
  },
  countText: {
    color:'green'
  }
});

2. 效果图

touchable02.jpg

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. 实例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableWithoutFeedback
} from 'react-native';
export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      text: 'hello'
    }
  }
  show(text) { 
    alert(text);
  }
  render() {
    return (
      <View style={styles.container}>
        < TouchableWithoutFeedback
          onLongPress={() => this.setState({ text: "长按" })}
          onPressIn={() => this.setState({ text: "按下" })}
          onPressOut={() => this.setState({ text: "松开" })}
          onPress ={this.show.bind(this,'做最特别的一个')}
        >
          <View style={styles.button}>
            <Text style={styles.buttonText}>{this.state.text}</Text>
          </View>   
        </TouchableWithoutFeedback>        
        </View>
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal:10,
    backgroundColor: 'white'
  },
  button: {
    marginLeft: 30,
    marginTop: 30,
    width: 100,
    height: 100,
    backgroundColor: '#18B4FF',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
  },
  buttonText: {
   color:'white'
  },
  countContainer: {
    alignItems: 'center',
    padding:10
  },
  countText: {
    color:'green'
  }
});

4. 效果图

touchable03.jpg

TouchableNativeFeedback

本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。

1. 组件属性

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

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

2. 示例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableNativeFeedback
} from 'react-native';
export default class App extends Component { 
  
  show(text) { 
    
  }
  render() {
    return (
      <View style={styles.container}>
        < TouchableNativeFeedback
          onPress={this.show.bind(this, '做最特别的一个')}
          background={TouchableNativeFeedback.Ripple('blue', false)}
        >
          <View style={styles.button}>
            <Text style={styles.buttonText}>haha</Text>
          </View>   
        </TouchableNativeFeedback>
        </View>
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal:10,
    backgroundColor: 'white'
  },
  button: {
    marginLeft: 30,
    marginTop: 30,
    width: 100,
    height: 60,
    backgroundColor: '#18B4FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
   color:'white'
  },

});

3. 效果图

touchable04.jpg