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, justifyiOS	当取值为 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个系统颜色；