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 (
      <View style={styles.container}>
        <TouchableWithoutFeedback
          onPress={() => this.textOnclick()}>
          <View>
            <Text style={styles.welcome}>
              Welcome
            </Text>
          </View>
        </TouchableWithoutFeedback>

        <TouchableWithoutFeedback
          onPress={() => this.imageOnclick()}>
          <Image source={{uri: 'http://c1.mifile.cn/f/i/15/item/buyphone/mi5-yin.jpg'}} style={styles.imageStyle}>
          </Image>
        </TouchableWithoutFeedback>

        <Button
            containerStyle={{padding:10, height: 45, overflow:'hidden', borderRadius:4, backgroundColor:'white', marginTop: 10}}
            style={{fontSize: 20, color: 'green'}}
            styleDisable={{color: 'red'}}
            onPress={this.buttonOnclick}>
          这是一个按钮
        </Button>


        <TouchableHighlight
          style={{marginTop:20}}
          //按下后背景透明度变化
          activeOpacity={0.7}
          //按下后背景颜色
          underlayColor={'red'}
          onPress={() => ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
          <Text
              style={{fontSize:23, color:'blue', backgroundColor:'white'}}
              >
              这是一个文本(测试TouchableHighlight)
          </Text>
        </TouchableHighlight>

        <TouchableNativeFeedback
          background={TouchableNativeFeedback.SelectableBackground()}
          onPress={() => ToastAndroid.show('文本被点击了', ToastAndroid.SHORT)}>
          <View
            style={{marginTop:10}}>
            <Text
                style={{fontSize:23, color:'blue', backgroundColor:'white'}}
                >
                TouchableNativeFeedback
            </Text>
          </View>
        </TouchableNativeFeedback>
      </View>
    );
  },
});


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