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

---------------------------------------------------------------------------------------------------

React.native是facebook开源的一套基于JavaScript的开源框架，

非常方便用来开发移动设备的app。

并且，方便及时更新app的UI与数据。也非常方便部署。

goodmao希望帮助大家迅速上手掌握。

----------------------------------------------------------------------------------------------------

參考：

高亮button：https://facebook.github.io/react-native/docs/touchablehighlight.html#content

透明button：https://facebook.github.io/react-native/docs/touchableopacity.html#content

无反馈button：https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#content

样式Style：http://facebook.github.io/react-native/docs/view.html#style

视图View：http://facebook.github.io/react-native/docs/style.html#content

图像Image：https://facebook.github.io/react-native/docs/image.html#content

颜色參考：http://www.w3school.com.cn/html/html_colors.asp

源代码參考：Layout.h/.c文件

----------------------------------------------------------------------------------------------------

我们这一节，简介Reactbutton的使用。

目的是让大家在分分钟内理解并学会使用方法。

我相同也查看了n篇帖子和facebook的介绍贴（见上面链接），

一般来说，存在以下的问题：

1.无法直接让刚開始学习的人粘贴到demo代码中理解并使用，

2.不少帖子翻译和编写都有不完好甚至错误之处。

我都自己编程执行过，在这里的解说和案例，

为了方便大家，都专门编写了极其简单的样例，

但包括了最经常使用的、必须用的功能。

一、button简单介绍：

button是用户进行交互的一个控件，用户能够点击触发事件的发生，从而让App运行相应的功能。

（1）React的button有三种

    1.高亮触摸button TouchableHighlight

       按下时。button会有高亮效果。

       即在该button上系统设置了一个视图，

       当用户按下时。会让该视图变暗且透明度减少，提示用户该button被按下了。

    2.透明触摸button TouchableOpacity

       按下时，button视图。会呈现半透明效果。并能看到button的背景视图。

    3.无反馈触摸button TouchableWithoutFeedback

       按下时，button没有变化，但设置的响应方法会被系统调用。

（2）Reactbutton的事件处理

    button关联了四个事件：

    1.button按下事件：onPress          - 按下并松开button。会触发该事件

    2.button长按事件：onLongPress  - 按住button不松开，会触发该事件

    3.button按下事件：onPressIn       - 按下button不松开，会触发该事件

    4.button松开事件：onPressOut    - 按下button后松开，或按下button后移动手指到button区域外，都会触发该事件

（3）button表现形式

    1.文字button

    在button上设置文字

    2.图片button

    在button上设置图片

    图片来源。相同能够是直接加入到项目中的静态图片，也能够是来自网络的图片。

    关于图片设置。能够參考上一节Image的使用介绍。

二、button的用法

（1）设置模式和创建React变量

'use strict';

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

var {

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

（2）定义样式

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

（3）创建组件对象

var HelloReact = React.createClass({

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

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

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

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

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

    //渲染方法
    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>
        );
    }

});

说明：

    1.定义了四个方法，用于处理button事件

       方法名字，自定义。注意可读性。

       a.按键按下 onPressed_btn( ) 

       b.长按 onLongPress_btn( )

       c.被按下时  onPressIn_btn( )

       d.松开button时 onPressOut_btn( )

     2.关联button事件与事件处理方法

        在button的属性中，指定button事件和相应的方法就可以。

           

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

（4）注冊组件

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

（5）执行效果图

    1.三种button

    

    2.高亮button被按下

    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFveWluZ3lvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

    3.透明button被按下

    

    4.无反馈button被按下

    

三、注意事项

（1）必须给button设置子视图

也就是说。button必须设置显示的文字或图片，否则会报错。

比如：

            <TouchableHighlight style = {styles.button} onPress = {this.onPressed_btn}>

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

            </TouchableHighlight>

编译执行时，Xcode错误例如以下：

 message: Invariant Violation: onlyChild must be passed a children with exactly one child."

（2）设置文字button两种方法

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