React Native组件篇（四） — 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);