React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。

目录

• Properties 属性
  • Text 文本
  • Dimension 尺寸
  • Positioning 定位
  • Margin 外部白
  • Padding 内补白
  • Border 边框
  • Background 背景
  • Transform 转换
  • Flexbox 弹性盒
  • Other 其他
• Values 取值
  • Color 颜色
  • Number 数值
• Units 单位
  • Pt 点

Properties 属性

Text 文本

属性名	取值	描述
color	<color>	对应 CSS 中的 color 属性
fontFamily	string	对应 CSS 中的 font-family 属性
fontSize	<number>	对应 CSS 中的 font-size 属性
fontStyle	normal, italic	对应 CSS 中的 font-style 属性，但阉割了 oblique 取值
fontWeight	normal, bold 100~900	对应 CSS 中的 font-weight 属性，但阉割了 bolder, lighter 取值
lineHeight	<number>	对应 CSS 中的 line-height 属性
textAlign	auto, left, right, center, justifyiOS	对应 CSS 中的 text-align 属性，增加了 auto 取值
textAlignVerticalAndroid	auto, top, bottom, center	对应 CSS 中的 vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值
textShadowColor	<color>	对应 CSS 中的 text-shadow 属性中的颜色定义
textShadowOffset	{ width: <number>, height: <number> }	对应 CSS 中的 text-shadow 属性中的阴影偏移定义
textShadowRadius	<number>	在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
letterSpacingiOS	<number>	对应 CSS 中的 letter-spacing 属性，但取值不同
textDecorationColoriOS	<color>	对应 CSS 中的 text-decoration-color 属性
textDecorationLineiOS	none, underline, line-through, underline line-through	对应 CSS 中的 text-decoration-line 属性，但阉割了 overline, blink 取值
textDecorationStyleiOS	solid, double, dotted, dashed	对应 CSS 中的 text-decoration-style 属性，但阉割了 wavy 取值
writingDirectioniOS	auto, ltr, rtl	对应 CSS 中的 direction 属性，增加了 auto 取值

Dimension 尺寸

属性名	取值	描述
width	<number>	对应 CSS 中的 width 属性
height	<number>	对应 CSS 中的 height 属性

Positioning 定位

属性名	取值	描述
position	absolute, relative	对应 CSS 中的 position 属性，但阉割了 static, fixed 取值
top	<number>	对应 CSS 中的 top 属性
right	<number>	对应 CSS 中的 right 属性
bottom	<number>	对应 CSS 中的 bottom 属性
left	<number>	对应 CSS 中的 left 属性

Margin 外部白

属性名	取值	描述
margin	<number>	对应 CSS 中的 margin 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的外补白
marginHorizontal	<number>	CSS中没有对应的属性，相当于同时设置marginRight和marginLeft
marginVertical	<number>	CSS中没有对应的属性，相当于同时设置marginTop和marginBottom
marginTop	<number>	对应 CSS 中的 margin-top 属性
marginRight	<number>	对应 CSS 中的 margin-right 属性
marginBottom	<number>	对应 CSS 中的 margin-bottom 属性
marginLeft	<number>	对应 CSS 中的 margin-left 属性

Padding 内部白

属性名	取值	描述
padding	<number>	对应 CSS 中的 padding 属性，不同的是，只能定义一个参数，用以表示上、右、下、左4个方位的内补白
paddingHorizontal	<number>	CSS中没有对应的属性，相当于同时设置paddingRight和paddingLeft
paddingVertical	<number>	CSS中没有对应的属性，相当于同时设置paddingTop和paddingBottom
paddingTop	<number>	对应 CSS 中的 padding-top 属性
paddingRight	<number>	对应 CSS 中的 padding-right 属性
paddingBottom	<number>	对应 CSS 中的 padding-bottom 属性
paddingLeft	<number>	对应 CSS 中的 padding-left 属性

Border 边框

属性名	取值	描述
borderStyle	solid, dotted, dashed	对应 CSS 中的 border-style 属性，但阉割了 none, hidden, double, groove, ridge, inset, outset 取值，且无方向分拆属性
borderWidth	<number>	对应 CSS 中的 border-width 属性
borderTopWidth	<number>	对应 CSS 中的 border-top-width 属性
borderRightWidth	<number>	对应 CSS 中的 border-right-width 属性
borderBottomWidth	<number>	对应 CSS 中的 border-bottom-width 属性
borderLeftWidth	<number>	对应 CSS 中的 border-left-width 属性
borderColor	<color>	对应 CSS 中的 border-color 属性
borderTopColor	<color>	对应 CSS 中的 border-top-color 属性
borderRightColor	<color>	对应 CSS 中的 border-right-color 属性
borderBottomColor	<color>	对应 CSS 中的 border-bottom-color 属性
borderLeftColor	<color>	对应 CSS 中的 border-left-color 属性
borderRadius	<number>	对应 CSS 中的 border-radius 属性
borderTopLeftRadius	<number>	对应 CSS 中的 border-top-left-radius 属性
borderTopRightRadius	<number>	对应 CSS 中的 border-top-right-radius 属性
borderBottomLeftRadius	<number>	对应 CSS 中的 border-bottom-left-radius 属性
borderBottomRightRadius	<number>	对应 CSS 中的 border-bottom-right-radius 属性
shadowColor	<color>	对应 CSS 中的 box-shadow 属性中的颜色定义
shadowOffset	{ width: <number>, height: <number> }	对应 CSS 中的 box-shadow 属性中的阴影偏移定义
shadowRadius	<number>	在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
shadowOpacity	<number>	对应 CSS 中的 box-shadow 属性中的阴影透明度定义

Background 背景

属性名	取值	描述
backgroundColor	<color>	对应 CSS 中的 background-color 属性

Transform 转换

属性名	取值	描述
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}]	对应 CSS 中的 transform 属性
transformMatrix	TransformMatrixPropType	类似于 CSS 中 transform 属性的 matrix() 和 matrix3d() 函数
backfaceVisibility	visible, hidden	对应 CSS 中的 backface-visibility 属性

Flexbox 弹性盒

属性名	取值	描述
flex	<number>	对应 CSS 中的 flex 属性
flexDirection	row, column	对应 CSS 中的 flex-direction 属性，但阉割了 row-reverse, column-reverse 取值
flexWrap	wrap, nowrap	对应 CSS 中的 flex-wrap 属性，但阉割了 wrap-reverse 取值
justifyContent	flex-start, flex-end, center, space-between, space-around	对应 CSS 中的 justify-content 属性，但阉割了 stretch 取值。
alignItems	flex-start, flex-end, center, stretch	对应 CSS 中的 align-items 属性，但阉割了 baseline 取值。
alignSelf	auto, flex-start, flex-end, center, stretch	对应 CSS 中的 align-self 属性，但阉割了 baseline 取值

Other 其他

属性名	取值	描述
opacity	<number>	对应 CSS 中的 opacity 属性
overflow	visible, hidden	对应 CSS 中的 overflow 属性，但阉割了 scroll, auto 取值
elevationAndroid	<number>	CSS中没有对应的属性，只在 Android5.0+ 上有效
resizeMode	cover, contain, stretch	CSS中没有对应的属性，可以参考 background-size 属性
overlayColorAndroid	string	CSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColoriOS	<color>	CSS中没有对应的属性，iOS 图像上特殊的色彩，改变不透明像素的颜色

Valuse 取值

Color 颜色

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

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

Number 数值

在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位，详细请看 Units 单位 部分。

Units 单位

Pt 点

在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位，例如：

<View style={{width: 100, height: 50}}></View>

var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

未完待续。。。