代碼實例
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') 屬性定義了項目在主軸上的對齊方式。
寬高
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