Match的React Native入門之旅

這是一篇學習筆記，注意事項的文章。
文中的資料絕大部分出自React中文網

一 搭建開發環境

運行

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

三 State（狀態）

我們使用兩種數據來控制一個組件：props和state。props是在父組件中指定，而且一經指定，在被指定的組件的生命週期中則不再改變。 對於需要改變的數據，我們需要使用state。

一般來說，你需要在constructor中初始化state（ES5:getInitialState方法來初始化state），然後在需要修改時調用setState方法。

---

五 樣式

只是按照JS的語法要求使用了駝峯命名法，例如將background-color改爲backgroundColor。

style屬性可以是一個普通的JavaScript**對象。這是最簡單的用法，因而在示例代碼中很常見。你還可以傳入一個數組——在數組中位置居後的樣式對象比居前的優先級更高**，這樣你可以間接實現樣式的繼承。

實際開發中組件的樣式會越來越複雜，我們建議使用StyleSheet.create來集中定義組件的樣式。

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
        <Text style={[styles.bigblue,{color:'black'}]} > {display}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue:{
    color:'blue',
    fontWeight:'bold',
    fontSize:30,
    color:'red',
  }
});

六 高度與寬度

指定寬高

在樣式中指定固定的width和height。React Native中的尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點。(dp)

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

彈性寬高（Flex）

在組件樣式中使用flex可以使其在可利用的空間中動態地擴張或收縮。一般而言我們會使用flex:1來指定某個組件擴張以撐滿所有剩餘的空間。

組件能夠撐滿剩餘空間的前提是其父容器的尺寸不爲零。如果父容器既沒有固定的width和height，也沒有設定flex，則父容器的尺寸爲零。其子組件如果使用了flex，也是無法顯示的。

此時子控件除非強制制定width height 才能顯示

// 試試去掉父View中的`flex: 1`。
      // 則父View不再具有尺寸，因此子組件也無法再撐開。
      // 然後再用`height: 300`來代替父View的`flex: 1`試試看？
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>

七 使用Flexbox佈局

flexDirection(方向) justifyContent（主軸分佈方式） alignItems（次軸分佈方式)
使用flexbox規則來指定某個組件的子元素的佈局。

一般來說，使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經能滿足大多數佈局需求。譯

React Native中的Flexbox的工作原理和web上的CSS基本一致，當然也存在少許差異。首先是默認值不同：flexDirection的默認值是column而不是row，而flex也只能指定一個數字值。

Flex Direction

在組件的style中指定flexDirection可以決定佈局的主軸。子元素是應該沿着水平軸(row)方向排列，還是沿着豎直軸(column)方向排列呢？默認值是豎直軸(column)方向。

// 嘗試把`flexDirection`改爲`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

Justify Content(主軸)

在組件的style中指定justifyContent可以決定其子元素沿着主軸的排列方式。子元素是應該靠近主軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end、space-around以及space-between。

和Android新出的ConstraintLayout很相似是不是，因爲ConstraintLayout就是模仿flexible 佈局的產物

/ 嘗試把`justifyContent`改爲`center`看看
      // 嘗試把`flexDirection`改爲`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

Align Items（次軸）

在組件的style中指定alignItems可以決定其子元素沿着次軸（與主軸垂直的軸，比如若主軸方向爲row，則次軸方向爲column）的排列方式。子元素是應該靠近次軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end以及stretch。

可參考[佈局樣式屬性]:http://reactnative.cn/docs/0.44/layout-props.html

八 處理文本輸入

TextInput是一個允許用戶輸入文本的基礎組件。
它有一個名爲onChangeText的屬性，此屬性接受一個函數，而此函數會在文本變化時被調用。
另外還有一個名爲onSubmitEditing的屬性，會在文本被提交後（用戶按下軟鍵盤上的提交鍵）調用。

“`
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ”};
}

render() {
return (