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