React-Native常用样式

➕这一步,再搞懂这几步React Native才算入门

属性名	取值	描述
color	color
fontFamily	string
fontSize	number
fontStyle	`normal`, `italic`
fontWeight	`normal`, `bold` `100~900`
lineHeight	number
textAlign	`auto`, `left`, `right`, `center`, `justify`^iOS	当取值为 `justify` 时，在 `Android` 上会变为 `left`
textDecorationLine	`none`, `underline`, `line-through`, `underline line-through`
textShadowColor	color
textShadowOffset	{ width:number, height:number }
textShadowRadius	number
includeFontPadding ^Android	bool	Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false
textAlignVertical ^Android	`auto`, `top`, `bottom`, `center`
fontVariant ^iOS	`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`
letterSpacing ^iOS	number
textDecorationColor ^iOS	color
textDecorationStyle ^iOS	`solid`, `double`, `dotted`, `dashed`
writingDirection ^iOS	`auto`, `ltr`, `rtl`
width	number
minWidth	number
maxWidth	number
height	number
minHeight	number
maxHeight	number
position	`absolute`, `relative`
top	number
right	number
bottom	number
left	number
zIndex	number	元素的堆叠顺序
margin	number
marginHorizontal	number	`marginRight` ➕ `marginLeft`
marginVertical	number	`marginTop` ➕ `marginBottom`
marginTop	number
marginRight	number
marginBottom	number
marginLeft	number
padding	number
paddingHorizontal	number	`paddingRight` ➕ `paddingLeft`
paddingVertical	number	`paddingTop` ➕ `paddingBottom`
paddingTop	number
paddingRight	number
paddingBottom	number
paddingLeft	number
borderStyle	`solid`, `dotted`, `dashed`
borderWidth	number
borderTopWidth	number
borderRightWidth	number
borderBottomWidth	number
borderLeftWidth	number
borderColor	color
borderTopColor	color
borderRightColor	color
borderBottomColor	color
borderLeftColor	color
borderRadius	number
borderTopLeftRadius	number
borderTopRightRadius	number
borderBottomLeftRadius	number
borderBottomRightRadius	number
shadowColor	color
shadowOffset	{ width: number, height:number }
shadowRadius	number
shadowOpacity	number
backgroundColor	color
transform	`[{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]`
transformMatrix	`TransformMatrixPropType`
backfaceVisibility	`visible`, `hidden`
flex	number	布局权重
flexGrow	number	设置或检索弹性盒的扩展比率
flexShrink	number	将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。
flexBasis	number	设置或检索弹性盒伸缩基准值
flexDirection	`row`, `row-reverse`, `column`, `column-reverse`
flexWrap	`wrap`, `nowrap`
justifyContent	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
alignItems	`flex-start`, `flex-end`, `center`, `stretch`
alignSelf	`auto`, `flex-start`, `flex-end`, `center`, `stretch`

Other 其他

属性名	取值	描述
opacity	number	不透明度
overflow	`visible`, `hidden`, `scroll`	当内容溢出元素框时发生的事情
elevation ^Android	number	只在 `Android5.0+` 上有效
resizeMode	`cover`, `contain`, `stretch`
overlayColor ^Android	string	当图像有圆角时，将角落都充满一种颜色
tintColor ^iOS	color	`iOS` 图像上特殊的色彩，改变不透明像素的颜色

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型：

#f00 (#rgb)
#f00c (#rgba)：
#ff0000 (#rrggbb)
#ff0000cc (#rrggbbaa)：
rgb(255, 0, 0)
rgba(255, 0, 0, 0.9)
hsl(360, 100%, 100%)
hsla(360, 100%, 100%, 0.9)
transparent
0xff00ff00 (0xrrggbbaa)：
Color Name：支持了基本颜色关键字和拓展颜色关键字，但不支持 28个系统颜色；

React-Native常用样式

➕这一步,再搞懂这几步React Native才算入门

Other 其他

Color 颜色

推荐阅读更多精彩内容