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。