代码实例
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