react-native學習---react-native佈局

學而時習之,不亦樂乎
react-native中佈局採用的是FlexBox(彈性框)進行佈局

在react-native 佈局中需要注意的是：
1.在react-native中的尺寸是沒有單位的（android設備中尺寸單位解釋爲sp,ios中解釋爲pt,代表設備獨立像素）
2.在react-native中css 與web端css基本相同，但有少許不同之處

#flexDirection
flecDirection ：定義父視圖中子元素的排列方式

• row: 從左向右依次排列
• row-reverse: 從右向左依次排列
• column(default): 默認的排列方式，從上向下排列
• column-reverse: 從下向上排列

#flexWrap
flexWrap 定義了子元素在父元素中是否允許多行排列

• nowrap flex的元素只排列在一行上，可能導致溢出。
• wrap flex的元素在一行排列不下時，就進行多行排列。

#justifyContent
justifyContent 定義了子元素沿父視圖水平方向主軸的分佈規則

• flex-start(default)
• flex-end
• center
• space-between
• space-around(每行第一個元素到行首的距離是元素間距的一半，最後一個元素也是如此)
  
  #alignItems
  alignItems 定義了子元素在父視圖沿側軸（垂直線）的分佈規則
• flex-start
• flex-end
• center
• stretch 彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。
  
  #alignSelf
  alignSelf 定義了被選中項目的對齊方式 **alignSelf 屬性可重寫靈活容器的 alignItems 屬性。
  auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則爲 “stretch”。
  stretch 元素被拉伸以適應容器。
  center
  flex-start
  flex-end
  
  #flex number
  flex 屬性定義了一個可伸縮元素的能力，默認爲0。