React-native第一课，Button的添加

    前两天开始着手react-native，之前的时间都费在环境上了，今天正式代码的第一课。看过网上的资料，现在综合整理一下以备后续查看。

    首先，react-native 的环境配置见http://reactnative.cn/docs/0.24/getting-started.html#content

    然后进入代码环节了，我这里编写代码的环境是Atom。

    首先是在页面中显示一个Button,图片如下。

   实现代码如下，修改index.android文件，我这里用到的按钮控件为 TouchableOpacity

 import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity   <--加入引用
} from 'react-native';

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>     加入控件，这里的属性设置为使用的style,以下会有代码
        <Text style={styles.textstyle}>
          确定         <--------显示字体
        </Text>
        </TouchableOpacity>
      </View>
    );
  }

const styles = StyleSheet.create({          <-------style定义
  button:{
    height: 80,
    width: 200,
    backgroundColor:'gray',
   justifyContent:'center',
   borderRadius: 20,
    },
 textstyle:{
   textAlign:'center',
   fontSize:20,
 },......

      这样单纯的显示Button就完成了，其次关心的一定是Button的点击事件了，那么以下我们就来实现以下Button的点击事件吧

      给 TouchableOpacity添加点击事件的属性是onPress,有点像android中在xml给button添加点击事件的方法。

    class Test extends Component {
    onclick=() => {
       alert('我点击了按钮');
    };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress ={this.onclick}
         >
        <Text style={styles.textstyle}>
          确定
        </Text>


        </TouchableOpacity>
      </View>
    );
  }
}

   这样的话简单的点击事件就处理完了。我们下面尝试自己封装一个Button,主要牵扯到一些JS的用法，对于像我这种java选手刚接触到JS的来说，下面的代码还是蛮精致的。

   首先沾代码的。自己的Button

  /**
 * xiaoaxue 2016.4.21
 */

import React, {
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class Button extends Component {

constructor(props){
    super(props);
    this.state = {
      _text:props.text,
    }
  }
  onclick=() => {
      alert('我点击了按钮');
  };

  render() {
    //大括号叫解构，将props中的属性text取出来放入text中，好处是可以取多个值
    const {text,background}  = this.props;
    return (
      <View style={styles.container}>
        <TouchableOpacity
        style={[styles.button,{backgroundColor:background}]}>
        <Text style={styles.textstyle}>
         {/*{this.props.text}*/}
        {this.state._text}
        </Text>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  button:{
    height: 80,
    width: 200,
    backgroundColor:'gray',
   justifyContent:'center',
   borderRadius: 20,
 },
 textstyle:{
   textAlign:'center',
   fontSize:20,
 },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

  

index中修改：

import Button from './src/component/Button';


class Test extends Component {
  render() {
    return (
      <View style={styles.container}>
      {/* props,属性*/}
        <Button text = "确定"  background ="red"/>
        <Button text = "取消"  background ="gray"/>
      </View>
    );
  }
}

  代码要点：

  1. 自己封装Button时通过构造方法传参数取值有两种方式

      ①：  构造参数为props,在构造方法内部取值

                 this.state = {
               _text:props.text,
              }

         调用时为this.state._text

     ②：  解构

               const {text,background}  = this.props；

               优点在于可解多个，调用时为this.props.text