React Native样式总结

转自:https://blog.csdn.net/Wbiokr/article/details/79133409

  • 布局类(flex)

具体可参考

justifyContent//主轴上对齐方式
alignItems//副轴上对齐方式
flexDirection//flex布局方向
flexWrap//flex换行设置
flexGrow//(子元素)放大权重
flexShrink//(子元素)缩小权重
flexBasis//(子元素)主轴空间配置
flex//(子元素)上三者缩写
alignSelf//(子元素)单元素对齐方式

  • 边角类
borderWidth//边框宽度,单方向设置为borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth
borderColor//边框颜色,单方向设置为borderBottomColor等
borderStyle//边框样式,单方向设置为borderBottomStyle等
borderRadius//圆角半径,单角设置为borderTopLeftRadius等

  • 变形类(对照css3)
transform//变形属性值缩写
translate//位移缩小
translateX//X轴位移
translateY//Y轴位移
scale//缩放缩小
scaleX//X轴缩放
scaleY//Y轴缩放
rotate//旋转缩小,rotateX,rotateY,rotateZ分别为单维度旋转
shadowColor//阴影颜色
shadowOffset//阴影偏移
shadowOpacity//阴影透明度
shadowRadius//阴影角度
elevation//高度,设置Z轴,可以产生立体效果
  • 盒模型类
height//高度
width//宽度
maxWidth//最大宽度
maxHeight//最大高度
padding//内边距,单方向内边距paddingLeft,paddingTop等
paddingVertical//top、bottom内边距
paddingHorizontal//left、right内边距
margin//外边距,单方向内边距marginTop、marginLeft等
marginVertical//top、bottom外边距
marginHorizontal//left、right外边距
backgroundColor//盒子背景色
backfaceVisibility//盒子背面面向屏幕时是否可见
overflow//溢出设置visible、hidden
opacity//盒子透明度

  • 位置类
position//定位类型absolute、relative
top//定位上坐标,left、right、bottom定位左、右、下坐标
zIndex//定位权重

  • 文本类
fontSize//字号
fontFamily//字体类型
fontStyle//字体样式normal、italic
fontWeight//字体粗细
fontVariant//字体变化
color//字体颜色
lineHeight//行高
letterSpacing//字间距
textAlign//文本对齐方式
textAlignVertical//文本容器间位置
textDecorationColor//下划线颜色
textDecorationLine//下划线位置
textDecorationStyle//下划线类型
textShadowColor//文本阴影颜色
textShadowOffset//文本阴影偏移
textShadowRadius//文本阴影圆角
writingDirection//文本方向ltr rtl auto

  • 其它
tintColor
//tintColor是IOS平台专有属性,颜色类型,
//可以让图片中的非透明像素部分有一种被染色的效果

overlayColor
//overlayColor是Android平台的专有属性,颜色类型. 
//Android平台在某些特殊情况无法通过borderRadius实现圆角效果,这时需要使用overlayColor属性,
//强行将需要圆角的部分使用指定的颜色填充, 从而实现圆角效果.

resizeMode
//image尺寸类型,contain, cover和stretch.默认值是cover.

猜你喜欢

转载自blog.csdn.net/yingzizizizizizzz/article/details/82427013