RN-Style 詳細說明

代碼實例

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;屬性定義當元素不面向屏幕時是否可見

backgroundColor:背景色

transform

transformMatrix

定位

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

top:上

bottom:下

left:左

right:右

圖像變換

scaleX :水平方向縮放

scaleY :垂直方向縮放

rotation :旋轉

translateX :水平方向平移

translateY :水平方向平移

陰影

shadowColor

shadowOffset

shadowOpacity

shadowRadius

圖片相關屬性

resizeMode:enum('cover','contain','stretch') contain是指無論如何圖片都包含在指定區域內,假設設置的寬度高度比圖片大,則圖片居中顯示,否則,圖片等比縮小顯示

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

tintColor:著色,rgb字符串類型

opacity:透明度

字體相關屬性

color:字體顏色

fontFamily:字體族

fontSize:字體大小

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

fontWeight:字體粗細,值為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')不知道什么屬性,寫作方向?從左到右?從右到左??

邊框相關

borderStyle:邊框樣式

borderWidth:所有邊框寬度

borderTopWidth:頂部邊框寬度

borderBottomWidth:底部邊框寬度

borderLeftWidth:左邊邊框寬度

borderRightWidth:右邊框寬度

borderColor:邊框顏色

borderTopColor:頂部邊框顏色

borderBottomColor:底部邊框顏色

borderLeftColor:左邊邊框顏色

borderRightColor:右邊邊框顏色

邊框圓角

borderRadius

borderBottomLeftRadius

borderBottomRightRadius

borderTopLeftRadius

borderTopRightRadius


Flex布局相關

flex:number

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

flexWrap:enum('wrap','nowrap','wrap-reverse') 默認情況下,項目都排在一條線(又稱"軸線")上。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:相當于同時設置四個

marginVertical:相當于同時設置marginTop和marginBottom

marginHorizontal:相當于同時設置marginLeft和marginRight

內邊距

paddingTop:上

paddingBottom:下

paddingLeft:左

paddingRight:右

padding:相當于同時設置四個

paddingVertical:相當于同時設置paddingTop和paddingBottom

paddingHorizontal:相當于同時設置paddingLeft和paddingRight

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

推薦閱讀更多精彩內容

  • 移動開發基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,512評論 0 6
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,612評論 0 26
  • 本文出自《React Native學習筆記》系列文章。 一款好的APP離不了一個漂亮的布局,本文章將向大家分享Re...
    CrazyCodeBoy閱讀 37,524評論 3 278
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 姓名:趙麗萍 公司:寧波大發化纖有限公司 組別:第264期努力二組 【日精進打卡第140天】 【知~學習】 《六項...
    zhaoliping閱讀 175評論 0 0