React Native（第二节点击事件）

React Native的提供了四种点击事件

1. TouchableHighlight
2. TouchableNativeFeedback
3. TouchableOpacity
4. TouchableWithoutFeedback

其实可以将点击事件当成一个特殊的UI组件， 将这个特殊的UI组件包在UI组件的外面，就可以使指定的UI组件有了点击响应能力。

TouchableHighlight

这是点击透明度发生变化

 activeOpacity={0.7}
  按下后背景颜色
  underlayColor={'red'}

TouchableNativeFeedback

Android设备原生控件

TouchableOpacity

点击背景透明度变化activeOpacity={0.7}

TouchableWithoutFeedback

没有任何反馈效果的

React按钮的事件处理 按钮关联了四个事件：

     1. 按钮按下事件：onPress          - 按下并松开按钮，会触发该事件(相当于PC的onclick)  
     2. 按钮长按事件：onLongPress  - 按住按钮不松开，会触发该事件(长按事件)
     3. 按钮按下事件：onPressIn       - 按下按钮不松开，会触发该事件(相当于PC的onkeydown)  
     4. 按钮松开事件：onPressOut    - 按下按钮后松开，或按下按钮后移动手指到按钮区域外，都会触发该事件(相当于PC的onkeyup) 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var Button = require('react-native-button')
var {
  AppRegistry,
  StyleSheet,
  ToastAndroid,
  Text,
  View,
  TouchableWithoutFeedback,
  TouchableHighlight,
  TouchableNativeFeedback,
  Image,
} = React;

var TestReactNative = React.createClass({

  getInitialState: function()
  {

    ToastAndroid.show('哈哈哈哈哈', ToastAndroid.SHORT);
    return null;
  },

  textOnclick:function()
  {
    ToastAndroid.show('点击了', ToastAndroid.SHORT);
  },

  imageOnclick:function()
  {
    ToastAndroid.show('图片被点击了', ToastAndroid.SHORT);
  },

  buttonOnclick:function()
  {
    ToastAndroid.show('Button被点击了', ToastAndroid.SHORT);
  },

  //绘制视图
  render: function() {
    return (
      
         this.textOnclick()}>
          
            
              Welcome
            
          
        

         this.imageOnclick()}>
          
          
        

        
          这是一个按钮
        


         ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
          
              这是一个文本(测试TouchableHighlight)
          
        

         ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
          
            
                TouchableNativeFeedback
            
          
        
      
    );
  },
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff3000',
    // flexDirection: 'column',
  },
  welcome: {
    // flex: 1,
    width:200,
    //字体大小
    fontSize: 20,
    textAlign: 'center',
    // margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

  imageStyle:{
    width: 200,
    height: 200,
  }
});

AppRegistry.registerComponent('TestReactNative', () => TestReactNative);