代碼實例
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') 屬性定義了項目在主軸上的對齊方式。
寬高
width
height
外邊距:
marginTop:上
marginBottom:下
marginLeft:左
marginRight:右
margin:相當于同時設置四個
marginVertical:相當于同時設置marginTop和marginBottom
marginHorizontal:相當于同時設置marginLeft和marginRight
內邊距
paddingTop:上
paddingBottom:下
paddingLeft:左
paddingRight:右
padding:相當于同時設置四個
paddingVertical:相當于同時設置paddingTop和paddingBottom
paddingHorizontal:相當于同時設置paddingLeft和paddingRight