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);

效果：