react native佈局

像素無關

• react native中的尺寸是沒有單位的，它代表了設備的獨立像素
  

flex box的彈性盒子佈局和css3中有何不同？

• flexDiDirection在react native中的默認值是column，也就是默認是列排列；在web中默認值是row行排列
• alignItems：在react native中默認是stretch，在web中默認的是flex-start
• flex:在web中是可以接受三個參數的flex:2 2 10%,但是在react native中默認只能接受一個參數
• react native:默認不支持以下屬性：align-content flex-basis order flex-flow flex-shrink flex-grow

flex in React Native

• 父視圖屬性（容器屬性）

  • flexDirection（row、coloum、row-reverse、column-reverse）
  • flexWrap（wrap、nonowrap默認是nowrap即不允許多行排列，默認不換行）
  • justyfyContent（flex-start、flex-end、center、space-around、space-between主軸排列）
  • alignItems：flex-start、flex-end、stretch、center

• 子視圖屬性

  • alignSelf：用於確定視圖本身的對齊方式，可以用來靈活的重寫容器的alignItems屬性，默認情況下是auto也就是繼承了父容器的alignItem屬性（auto自動，flex-start，flex-end、center、stretch）
  • flex：定義可伸縮能力，默認爲0；可以默認爲爭奪空間的權重

其他

• 視圖邊框
  • borderWidth
  • borderColor
• 視圖尺寸
  • width
  • height
• 外邊距
  • margin
  • marginHorizental左右外邊距
  • marginVertical上下外邊距
• 內邊距
  • padding
• 邊緣
  • left、right、top、bottom
• 定位：
  • position：relative（相對其正常位置進行定位）、absolute