2，view標籤的style樣式概況

• View 的設計初衷是和 StyleSheet 搭配使用，這樣可以使程式碼更清晰並且獲得更高的效能。儘管內聯樣式也同樣可以使用。
• 內聯樣式可以使用程式碼聯想，StyleSheet不可用；可以先聯想完，再一併寫到StyleSheet中；
• StyleSheet中多個樣式可以使用拼接樣式，用中括號；內聯樣式用大括號

<View style={styles.container}>
        <View style={[styles.top, styles.border]}>
        </View>
        <View style={[styles.bottom, styles.border, {borderWidth: 5}]}>
        </View>
      </View>
 

3，view的style樣式分類

• 1，ViewStyle:view的邊角樣式

• borderWidth//邊框寬度，單方向設定為borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth 
  borderColor//邊框顏色，單方向設定為borderBottomColor等 
  borderStyle//邊框樣式，單方向設定為borderBottomStyle等 
  borderRadius//圓角半徑，單角設定為borderTopLeftRadius等

• 2，FlexStyle：view的佈局樣式
  • 盒模型樣式（後面詳解）
  • 佈局樣式（後面詳解）
• 3，ShadowStyleIOS：iOS的陰影樣式

•  shadowColor?: string;//陰影顏色
   shadowOffset?: { width: number; height: number };//陰影偏移
   shadowOpacity?: number;//陰影不透明度
   shadowRadius?: number;//陰影圓角

• 4，TransformsStyle：view的變換樣式

transform//變形屬性值縮寫
translate//位移縮小
translateX//X軸位移
translateY//Y軸位移
scale//縮放縮小
scaleX//X軸縮放
scaleY//Y軸縮放
rotate//旋轉縮小，rotateX，rotateY，rotateZ分別為單維度旋轉
 

4，盒模型樣式

• margin//外邊距，單方向內邊距marginTop、marginLeft等
  marginVertical//top、bottom外邊距
  marginHorizontal//left、right外邊距
  height//高度
  width//寬度
  maxWidth//最大寬度
  maxHeight//最大高度
  padding//內邊距，單方向內邊距paddingLeft，paddingTop等
  paddingVertical//top、bottom內邊距
  paddingHorizontal//left、right內邊距
  
  backgroundColor//盒子背景色
  backfaceVisibility//盒子背面面向螢幕時是否可見
  overflow//溢位設定visible、hidden
  opacity//盒子透明度
  position//定位型別absolute、relative
  top//定位上座標，left、right、bottom定位左、右、下座標
  zIndex//定位權重

5，佈局樣式

• /* 
  flex佈局：
  1，flexDirection共有四個值，在RN中預設為column。
      row（預設值）：主軸為水平方向，從左向右。依次排列
      row-reverse：主軸為水平方向，從右向左依次排列
      column：主軸為垂直方向，預設的排列方式，從上向下排列
      column-reverse：主軸為垂直方向，從下向上排列
  
  2，flexWrap屬性：決定子控制元件在父檢視內是否允許多行排列。
      flexWrap共有兩個值，預設為nowrap。
      nowrap 元件只排列在一行上，可能導致溢位。
      wrap   元件在一行排列不下時，就進行多行排列
  
  3，justifyContent屬性:決定子元件在主軸中具體佈局，是靠左，還是居中等
      justifyContent共有五個值，預設為flex-start
      flex-start: 子元件向主軸起點對齊，如果主軸水平，從左開始，主軸垂直，從上開始。
      flex-end 子元件向主軸終點對齊，如果主軸水平，從右開始，主軸垂直，從下開始。
      center 居中顯示，注意：並不是讓某一個子元件居中，而是整體有居中效果
      space-between 均勻分配,相鄰元素間距離相同。每行第一個元件與行首對齊，每行最後一個元件與行尾對齊。
      space-around 均勻分配,相鄰元素間距離相同。每行第一個元件到行首的距離和每行最後一個元件到行尾的距離將會是相鄰元素之間距離的一半
  
  4，alignItems:決定子元件在測軸中具體佈局，決定子元件在上，還是下，或者居中
      alignItems共有四個值，預設為stretch。
      flex-start 子元件向側軸起點對齊。
      flex-end 子元件向側軸終點對齊。
      center 子元件在側軸居中。
      stretch 子元件在側軸方向被拉伸到與容器相同的高度或寬度。
  
  5，alignSelf：自定義自己的側軸佈局，用於一個子元件設定。
  注意：當某個子元件不想參照預設的alignItems時，可以設定alignSelf，自定義自己的側軸佈局。
      alignSelf共有五個值，預設為auto。
      auto 繼承它的父容器的alignItems屬性。如果沒有父容器則為 "stretch"
      flex-start 子元件向側軸起點對齊。
      flex-end 子元件向側軸終點對齊。
      center 子元件在側軸居中。
      stretch 子元件在側軸方向被拉伸到與容器相同的高度或寬度。
  
  6，flex：決定子控制元件在主軸中佔據幾等分。
  flex: 任意數字，所有子控制元件flex相加，自己flex佔總共多少，就有多少寬度.
  
  */