RN-Style 詳細(xì)說明

代碼實例

var styles = StyleSheet.create({????

base: {width:38,height:38},? ?

background:{backgroundColor:'#222'}? ?

active:{borderWidth:2,borderColor:'#00ff00'}

});

Text style={styles.base} /

Text style={{styles.base, styles.background}} /

Text style={{styles.base, this.state.active && styles.active}} /

backfaceVisibility:visible|hidden;屬性定義當(dāng)元素不面向屏幕時是否可見

backgroundColor:背景色

transform

transformMatrix

定位

position:定位:相對定位(absolute)喉脖,絕對定位(relative)?默認(rèn)情況下使用的是相對定位

top:上

bottom:下

left:左

right:右

圖像變換

scaleX :水平方向縮放

scaleY :垂直方向縮放

rotation :旋轉(zhuǎn)

translateX :水平方向平移

translateY :水平方向平移

陰影

shadowColor

shadowOffset

shadowOpacity

shadowRadius

圖片相關(guān)屬性

resizeMode:enum('cover','contain','stretch') contain是指無論如何圖片都包含在指定區(qū)域內(nèi)卤材,假設(shè)設(shè)置的寬度高度比圖片大躲叼,則圖片居中顯示劫乱,否則,圖片等比縮小顯示

overflow:enum('visible','hidden')

tintColor:著色,rgb字符串類型

opacity:透明度

字體相關(guān)屬性

color:字體顏色

fontFamily:字體族

fontSize:字體大小

fontStyle:字體樣式,正常,傾斜,值為enum('normal','italic')

fontWeight:字體粗細(xì),值為enum('normal','bold','100','200'...,'900')

letterSpacing:字符間隔

lineHeight:行高

textAlign:字體對齊方式,值為enum('auto','left','right','center','justify')

textDecorationColor:貌似沒效果庆猫,修飾的線的顏色

textDecorationLine:貌似沒效果,字體修飾绅络,上劃線月培,下劃線,刪除線恩急,無修飾杉畜,值為enum("none",'underline','line-through','underline line-through')

textDecorationStyle:enum("solid",'double','dotted','dashed')貌似沒效果,修飾的線的類型

writingDirection:enum("auto",'ltr','rtl')不知道什么屬性衷恭,寫作方向此叠?從左到右?從右到左随珠??

邊框相關(guān)

borderStyle:邊框樣式

borderWidth:所有邊框?qū)挾?/p>

borderTopWidth:頂部邊框?qū)挾?/p>

borderBottomWidth:底部邊框?qū)挾?/p>

borderLeftWidth:左邊邊框?qū)挾?/p>

borderRightWidth:右邊框?qū)挾?/p>

borderColor:邊框顏色

borderTopColor:頂部邊框顏色

borderBottomColor:底部邊框顏色

borderLeftColor:左邊邊框顏色

borderRightColor:右邊邊框顏色

邊框圓角

borderRadius

borderBottomLeftRadius

borderBottomRightRadius

borderTopLeftRadius

borderTopRightRadius


Flex布局相關(guān)

flex:number

flexDirection: enum('row','column','row-reverse','column-reverse') 屬性決定主軸的方向(即項目的排列方向)灭袁。

flexWrap:enum('wrap','nowrap','wrap-reverse') 默認(rèn)情況下猬错,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義茸歧,如果一條軸線排不下倦炒,如何換行。

alignItems:enum('flex-start','flex-end','center','stretch') 屬性定義項目在交叉軸上如何對齊软瞎。

alignSelf:enum('auto','flex-start','flex-end','center','stretch') 屬性允許單個項目有與其他項目不一樣的對齊方式逢唤,可覆蓋

justifyContent:enum('flex-start','flex-end','center','space-between','space-around') 屬性定義了項目在主軸上的對齊方式。

Flex 布局教程:語法篇??Flex 布局教程:實例篇

寬高

width

height

外邊距:

marginTop:上

marginBottom:下

marginLeft:左

marginRight:右

margin:相當(dāng)于同時設(shè)置四個

marginVertical:相當(dāng)于同時設(shè)置marginTop和marginBottom

marginHorizontal:相當(dāng)于同時設(shè)置marginLeft和marginRight

內(nèi)邊距

paddingTop:上

paddingBottom:下

paddingLeft:左

paddingRight:右

padding:相當(dāng)于同時設(shè)置四個

paddingVertical:相當(dāng)于同時設(shè)置paddingTop和paddingBottom

paddingHorizontal:相當(dāng)于同時設(shè)置paddingLeft和paddingRight

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铜涉,一起剝皮案震驚了整個濱河市智玻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌芙代,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盖彭,死亡現(xiàn)場離奇詭異纹烹,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)召边,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進(jìn)店門铺呵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人隧熙,你說我怎么就攤上這事片挂。” “怎么了贞盯?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵音念,是天一觀的道長。 經(jīng)常有香客問我躏敢,道長闷愤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任件余,我火速辦了婚禮讥脐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘啼器。我一直安慰自己旬渠,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布端壳。 她就那樣靜靜地躺著告丢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪更哄。 梳的紋絲不亂的頭發(fā)上芋齿,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天腥寇,我揣著相機(jī)與錄音,去河邊找鬼觅捆。 笑死赦役,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的栅炒。 我是一名探鬼主播掂摔,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赢赊!你這毒婦竟也來了乙漓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤释移,失蹤者是張志新(化名)和其女友劉穎叭披,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玩讳,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涩蜘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了熏纯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片同诫。...
    茶點(diǎn)故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖樟澜,靈堂內(nèi)的尸體忽然破棺而出误窖,到底是詐尸還是另有隱情,我是刑警寧澤秩贰,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布霹俺,位于F島的核電站,受9級特大地震影響萍膛,放射性物質(zhì)發(fā)生泄漏吭服。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一蝗罗、第九天 我趴在偏房一處隱蔽的房頂上張望艇棕。 院中可真熱鬧,春花似錦串塑、人聲如沸沼琉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽打瘪。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間闺骚,已是汗流浹背彩扔。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留僻爽,地道東北人虫碉。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像胸梆,于是被迫代替她去往敵國和親敦捧。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評論 2 349

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