React-Native樣式學(xué)習(xí)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市酌壕,隨后出現(xiàn)的幾起案子掏愁,更是在濱河造成了極大的恐慌,老刑警劉巖卵牍,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件果港,死亡現(xiàn)場離奇詭異,居然都是意外死亡糊昙,警方通過查閱死者的電腦和手機(jī)辛掠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人萝衩,你說我怎么就攤上這事回挽。” “怎么了猩谊?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵千劈,是天一觀的道長。 經(jīng)常有香客問我牌捷,道長队塘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任宜鸯,我火速辦了婚禮,結(jié)果婚禮上遮怜,老公的妹妹穿的比我還像新娘淋袖。我一直安慰自己,他們只是感情好锯梁,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布即碗。 她就那樣靜靜地躺著,像睡著了一般陌凳。 火紅的嫁衣襯著肌膚如雪剥懒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天合敦,我揣著相機(jī)與錄音初橘,去河邊找鬼。 笑死充岛,一個胖子當(dāng)著我的面吹牛保檐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播崔梗,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼夜只,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蒜魄?” 一聲冷哼從身側(cè)響起扔亥,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谈为,沒想到半個月后旅挤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伞鲫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年谦铃,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榔昔。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡驹闰,死狀恐怖瘪菌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嘹朗,我是刑警寧澤师妙,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站屹培,受9級特大地震影響默穴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜褪秀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一蓄诽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧媒吗,春花似錦仑氛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至甫何,卻和暖如春出吹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辙喂。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工捶牢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人巍耗。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓叫确,卻偏偏與公主長得像,于是被迫代替她去往敵國和親芍锦。 傳聞我的和親對象是個殘疾皇子竹勉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

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