【Facebook的UI开发框架React入门之九】按钮简介（iOS平台）-goodmao

'use strict';

var React = require('react-native');

var {

  AppRegistry,
  StyleSheet,
  View,
  Text,
  Image,
  //1.高亮触摸
  TouchableHighlight,
  //2.不透明触摸
  TouchableOpacity,
  //3.无反馈触摸
  TouchableWithoutFeedback,
} = React;

var styles = StyleSheet.create({

  container: {
    //flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'cyan',
  },

  size: {
    width: 140,
    height: 95,
  },

  buttonText: {
    fontSize: 28,
    color: 'white',
    alignSelf: 'center'
  },

  button: {
    width: 140,
    height: 95,
    //flex: 1,
    //flexDirection: 'row', //子视图排成一行; 默认是排成一列
    backgroundColor: 'blue',
    borderColor: 'blue',
    borderWidth: 1,
    borderRadius: 8,
  },
});

var HelloReact = React.createClass({

  //定义按钮响应事件处理方法
  //1.按键按下
  onPressed_btn() {
    console.log('button pressed !');
  },

  //2.长按
  onLongPress_btn() {
    console.log('button onLongPress !');
  },

  //3.被按下时 - 按下按钮不松开，会触发该事件
  onPressIn_btn() {
    console.log('button onPressIn !');
  },

  //4.松开按钮时
  //- 按下按钮后松开，或按下按钮后移动手指到按钮区域外
  onPressOut_btn() {
    console.log('button onPressOut !');
  },

    //1.高亮触摸 TouchableHighlight - 按下时，按钮会有高亮效果
    //2.透明触摸 TouchableOpacity - 按下时，按钮会半透明并能看到背景
    //3.无反馈触摸 TouchableWithoutFeedback - 按下时，按钮没有变化，但绑定的响应方法会被系统调用

    //渲染方法
    render : function() {
        return (

           <View style={styles.container}>
             <TouchableHighlight style = {styles.button} onPress={this.onPressed_btn}>
                <Image 
                 source={require('image!goodmao')}
                 style={styles.size} 
                />
              </TouchableHighlight>

            <TouchableOpacity style = {styles.button} onPress={this.onPressed_btn}>
                <Image 
                 source={require('image!goodmao')}
                 style={styles.size} 
                />
            </TouchableOpacity>

            <TouchableWithoutFeedback style = {styles.button} onPress={this.onPressed_btn}>
                <Image 
                 source={require('image!goodmao')}
                 style={styles.size} 
                />
            </TouchableWithoutFeedback>

          </View>
        );
    }

});

 <TouchableHighlight 
                 style = {styles.button}
                 onPress = {this.onPressed_btn}
                 onLongPress = {this.onLongPress_btn}
                 onPressIn = {this.onPressIn_btn}
                 onPressOut = {this.onPressOut_btn}
                >

                <Text style={styles.buttonText}>我是按钮</Text>
</TouchableHighlight>

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

<TouchableHighlight style = {styles.button} onPress = {this.onPressed_btn}>
     <Text style={styles.buttonText}>我是按钮</Text>
</TouchableHighlight>

<TouchableHighlight style = {styles.button} onPress={this.onPressed_btn}>
      <View style={styles.button}>
            <Text style={styles.buttonText}>我是按钮</Text>
      </View>
</TouchableHighlight>