前兩天開始著手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   <--加入引用

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>     加入控制元件，這裡的屬性設定為使用的style,以下會有程式碼
        <Text style={styles.textstyle}>
          確定         <--------顯示字型
        </Text>
        </TouchableOpacity>

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