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的布局設(shè)定算凿。border相關(guān)
borderBottomWidth number(下)
borderLeftWidth number (左)
borderRightWidth number (右)
borderTopWidth number (上)
borderWidth number (全部設(shè)置)
這個屬性和css3中的border工作機(jī)制一樣降宅。flex number
在react-native中的flex和css中不一樣恍箭。在react-native中已卸,flex只能是用數(shù)字來表示佛玄。它的工作顯示是根據(jù)css-layout規(guī)則運(yùn)行的。
當(dāng)flex是一個正數(shù)(positive number)的時候累澡,他的大小將和父視圖成比例彈性縮放梦抢,當(dāng)它設(shè)置為2的時候,他的大小將是設(shè)置為1的時候的兩倍愧哟。
當(dāng)它設(shè)置為0的時候奥吩,它的大小將根據(jù)寬和高(width and height)來設(shè)置具伍。
當(dāng)它設(shè)置為-1的時候,他的它的大小將根據(jù)寬和高(width and height)來設(shè)置圈驼,如果空間不夠了,它將根據(jù)最小的寬和高來設(shè)置大小望几。flexDirection enum('row', 'row-reverse', 'column', 'column-reverse')
flexDirection 控制了子控件(視圖)在父視圖(控件)默認(rèn)的排列方向绩脆,在css中默認(rèn)是row(橫向),而在react-native中默認(rèn)為column(豎向)橄抹。和css中的flex-direction工作性質(zhì)一樣靴迫。flexWrap enum ( 'warp', 'nowrap')
flexWrap控制子控件是否能控制它的子項(xiàng)是否能換行當(dāng)他們到底部的容器的時候。
和css中flex-wrap的工作方式一樣楼誓。height (width)number
height(width)設(shè)置控件的高(寬)玉锌。justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent控制子控件的的主要對齊方向。例如疟羹,如果子控件是垂直排列的主守,那么這個屬性則控制在垂直方向上如何對齊。left number
left 是一個控制該控件左邊緣的偏移的邏輯像素榄融。它和css中l(wèi)eft的工作方式相似参淫,但不一樣。在react-native中愧杯,必須使用邏輯像素單位涎才,而不是百分比,em力九,或者是其他的東西耍铜。margin number
設(shè)置控件的外邊距值(同時設(shè)置了4個值)。marginBottom number
底部邊距跌前。marginHorizontal number
同時設(shè)置左右邊距棕兼。marginLeft number
左邊距。marginRight number
右邊距舒萎。marginTop number
頂部邊距程储。marginVertical number
同時設(shè)置上下邊距。maxHeight number
設(shè)置垂直方向上的最大高度臂寝。
同樣章鲤,這個屬性和css中的max-height工作的極為相似,但是咆贬,在react-native中必須使用像素邏輯單位败徊,而不是百分比,em掏缎,或者是其他的東西皱蹦。maxWidth number
同上煤杀。minHeight number
同上。minWidth number
同上沪哺。padding number
設(shè)置元素與元素內(nèi)容之間的邊距沈自,即內(nèi)邊距。
同時設(shè)置4個內(nèi)容辜妓。paddingBottom number
底部內(nèi)邊距枯途。paddingHorizontal number
同時設(shè)置左右內(nèi)邊距。paddingLeft number
設(shè)置左邊的內(nèi)邊距籍滴。paddingRight number
設(shè)置右邊的內(nèi)邊距酪夷。paddingTop number
是指上邊的內(nèi)邊距。paddingVertical number
同時設(shè)置上下內(nèi)邊距孽惰。position enum ('absolute', 'relative')
定位屬性晚岭。他的工作在react-native中的工作方式和css中的工作方式是相似的,但是在這里勋功,每個控件的位置都是相對于其父視圖的坦报,所以當(dāng)其設(shè)置為absolute時,它總是針對于它的父控件狂鞋。
如果你想設(shè)置子元素對于父元素有特定的像素位置時燎竖,設(shè)置為absolute屬性。
如果你想設(shè)置子元素的位置并不受父元素的影響要销,那么不要用這個style來設(shè)置构回,請用component tree。right number
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移距離疏咐。top number
同上纤掸。zIndex number
一般不會用到,可能在動畫中用到浑塞。
和css中z-index屬性一樣借跪。
文章原址[點(diǎn)擊跳轉(zhuǎn)] http://reactnative.cn/docs/0.31/layout-props.html