React Native组件篇（四） — Touchable系列组件

Touchable组件是什么

从字面上的意思我们就可以理解，Touchable是可触摸的控件，相当于我们iOS的简单手势。复杂的RN处理手势还有专门的API如果你想实现视图的拖拽，或是实现自定义的手势，那么请参阅PanResponder API或是手势识别系统的文档。

    Touchable现在主要有四种组件，TouchableHighlight 、TouchableOpacity 、 TouchableNativeFeedback 、 ouchableWithoutFeedback 。

• 一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

• 在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。 

• TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

• 如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

Touchable组件代码演示

import React, { Component } from 'react';import {   AppRegistry,  StyleSheet,  View,  Text,  TouchableHighlight,  TouchableOpacity,} from 'react-native';class RNHybrid extends Component {    constructor(props) {    super(props);    this.state = {event:'TouchableOpacity',    hightState:'TouchableHighlight'};  }  render() {          return(          <View style={styles.container}>                   <TouchableHighlight          activeOpacity = {0.5}         underlayColor = 'yellow'         onHideUnderlay={()=>this.hightStateSet('隐藏')}         onShowUnderlay={()=>this.hightStateSet('显示')}         onPress={()=>this.hightStateSet('点击')}        >             <Text>              {this.state.hightState}           </Text>        </TouchableHighlight>        <TouchableOpacity          underlayColor='blue'         onPress={()=>this.touchEvent('点击')}         onPressIn={()=>this.touchEvent('按下')}         onPressOut={()=>this.touchEvent('抬起')}         onLongPress={()=>this.touchEvent('长按')}        >         <Text>          {this.state.event}       </Text>        </TouchableOpacity>                       </View>      );       }    hightStateSet(highSateStr){       this.setState({hightState:highSateStr});   }    touchEvent(eventStr){       this.setState({event:eventStr});   } }const styles = StyleSheet.create({   container:{   marginTop:100,   flexDirection:'row',      flexWrap:'wrap',      justifyContent:'space-around',   },});AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

效果：