React Native(第2節クリックイベント)

React Nativeは4つのクリックイベントを提供しています
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
実際には、クリックイベントを特殊なUIコンポーネントとすることができ、この特殊なUIコンポーネントをUIコンポーネントの外にパッケージすると、指定されたUIコンポーネントにクリック応答能力を持たせることができます.
TouchableHighlight
クリックの透明度が変わります
ActiveOpacity={0.7}押すと背景色underlayColor={'red'}
TouchableNativeFeedback
Androidデバイスのオリジナルコントロール
TouchableOpacity
背景透明度変化をクリック
TouchableWithoutFeedback
何のフィードバックもありません
Reactボタンのイベント処理ボタンには、4つのイベントが関連付けられています.

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