React-Native樣式學習

width: Dimensions.get('window').width,//屏幕的寬
height: Dimensions.get('window').height//屏幕的高

  • alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
    這個屬性是指控制子視圖的輔助方向的布局 ,如果子視圖在的主要方向上是垂直排列,這個屬性則控制橫向的方向,反之則是豎向。

  • alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
    這個屬性將會覆蓋父視圖的alignltem的布局設定。

  • border相關

  • borderBottomWidth number(下)

  • borderLeftWidth number (左)

  • borderRightWidth number (右)

  • borderTopWidth number (上)

  • borderWidth number (全部設置)
    這個屬性和css3中的border工作機制一樣。

  • flex number
    在react-native中的flex和css中不一樣。在react-native中,flex只能是用數字來表示。它的工作顯示是根據css-layout規則運行的。
    當flex是一個正數(positive number)的時候,他的大小將和父視圖成比例彈性縮放,當它設置為2的時候,他的大小將是設置為1的時候的兩倍。
    當它設置為0的時候,它的大小將根據寬和高(width and height)來設置。
    當它設置為-1的時候,他的它的大小將根據寬和高(width and height)來設置,如果空間不夠了,它將根據最小的寬和高來設置大小。

  • flexDirection enum('row', 'row-reverse', 'column', 'column-reverse')
    flexDirection 控制了子控件(視圖)在父視圖(控件)默認的排列方向,在css中默認是row(橫向),而在react-native中默認為column(豎向)。和css中的flex-direction工作性質一樣。

  • flexWrap enum ( 'warp', 'nowrap')
    flexWrap控制子控件是否能控制它的子項是否能換行當他們到底部的容器的時候。
    和css中flex-wrap的工作方式一樣。

  • height (width)number
    height(width)設置控件的高(寬)。

  • justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
    justifyContent控制子控件的的主要對齊方向。例如,如果子控件是垂直排列的,那么這個屬性則控制在垂直方向上如何對齊。

  • left number
    left 是一個控制該控件左邊緣的偏移的邏輯像素。它和css中left的工作方式相似,但不一樣。在react-native中,必須使用邏輯像素單位,而不是百分比,em,或者是其他的東西。

  • margin number
    設置控件的外邊距值(同時設置了4個值)。

  • marginBottom number
    底部邊距。

  • marginHorizontal number
    同時設置左右邊距。

  • marginLeft number
    左邊距。

  • marginRight number
    右邊距。

  • marginTop number
    頂部邊距。

  • marginVertical number
    同時設置上下邊距。

  • maxHeight number
    設置垂直方向上的最大高度。
    同樣,這個屬性和css中的max-height工作的極為相似,但是,在react-native中必須使用像素邏輯單位,而不是百分比,em,或者是其他的東西。

  • maxWidth number
    同上。

  • minHeight number
    同上。

  • minWidth number
    同上。

  • padding number
    設置元素與元素內容之間的邊距,即內邊距。
    同時設置4個內容。

  • paddingBottom number
    底部內邊距。

  • paddingHorizontal number
    同時設置左右內邊距。

  • paddingLeft number
    設置左邊的內邊距。

  • paddingRight number
    設置右邊的內邊距。

  • paddingTop number
    是指上邊的內邊距。

  • paddingVertical number
    同時設置上下內邊距。

  • position enum ('absolute', 'relative')
    定位屬性。他的工作在react-native中的工作方式和css中的工作方式是相似的,但是在這里,每個控件的位置都是相對于其父視圖的,所以當其設置為absolute時,它總是針對于它的父控件。
    如果你想設置子元素對于父元素有特定的像素位置時,設置為absolute屬性。
    如果你想設置子元素的位置并不受父元素的影響,那么不要用這個style來設置,請用component tree。

  • right number
    right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移距離。

  • top number
    同上。

  • zIndex number
    一般不會用到,可能在動畫中用到。
    和css中z-index屬性一樣。


文章原址[點擊跳轉] http://reactnative.cn/docs/0.31/layout-props.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本文出自《React Native學習筆記》系列文章。 一款好的APP離不了一個漂亮的布局,本文章將向大家分享Re...
    CrazyCodeBoy閱讀 37,526評論 3 278
  • 一款好的APP離不了一個漂亮的布局,本文章將向大家分享React Native中的布局方式FlexBox。 在Re...
    鹿守心畔光閱讀 636評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,432評論 25 708
  • React Native 中的Flex使用 React Native中的FlexBox 和Web CSSS上Fle...
    東之城閱讀 1,755評論 1 0
  • 在夜的邊緣 扇動 綴滿五色羽毛的魅惑翅膀 用你圓潤的鰭 撥弄清冷的月光 跳舞的裙子 懂得一千種旋轉的姿勢 反正,我...
    鄭愚閱讀 315評論 0 1