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

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

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

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

而且，方便及时更新app的UI与数据，也很方便部署。

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

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

参考：

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

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

无反馈按钮：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文件

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

我们这一节，简单介绍React按钮的使用，

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

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

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

1.无法直接让初学者粘贴到demo代码中理解并使用，

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

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

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

但包含了最常用的、必须用的功能。

一、按钮简介：

按钮是用户进行交互的一个控件，用户可以点击触发事件的发生，从而让App执行对应的功能。

（1）React的按钮有三种

    1.高亮触摸按钮 TouchableHighlight

       按下时，按钮会有高亮效果。

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

       当用户按下时，会让该视图变暗且透明度降低，提示用户该按钮被按下了。

    2.透明触摸按钮 TouchableOpacity

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

    3.无反馈触摸按钮 TouchableWithoutFeedback

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

（2）React按钮的事件处理

    按钮关联了四个事件：

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

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

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

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

（3）按钮表现形式

    1.文字按钮

    在按钮上设置文字

    2.图片按钮

    在按钮上设置图片

    图片来源，同样可以是直接添加到项目中的静态图片，也可以是来自网络的图片。

    关于图片设置，可以参考上一节Image的使用介绍。

二、按钮的使用方法

（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({  //定义按钮响应事件处理方法  //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>        );    }});

说明：

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

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

       a.按键按下 onPressed_btn( ) 

       b.长按 onLongPress_btn( )

       c.被按下时  onPressIn_btn( )

       d.松开按钮时 onPressOut_btn( )

     2.关联按钮事件与事件处理方法

        在按钮的属性中，指定按钮事件和对应的方法即可。

           

 <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.三种按钮

    

    2.高亮按钮被按下

    

    3.透明按钮被按下

    

    4.无反馈按钮被按下

    

三、注意事项

（1）必须给按钮设置子视图

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

例如：

            <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）设置文字按钮两种方法

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