React-Native 样式指南
React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。
目录
- Properties 属性
- Text 文本
- Dimension 尺寸
- Positioning 定位
- Margin 外部白
- Padding 内补白
- Border 边框
- Background 背景
- Transform 转换
- Flexbox 弹性盒
- Other 其他
- Values 取值
- Color 颜色
- Number 数值
- Units 单位
- Pt 点
- PixelRatio 像素密度
Properties 属性
Text 文本（18）
属性名 | 取值 | 描述 |
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 取值。当取值为 justify 时，在 Android 上会变为 left |
textDecorationLine | none, underline, line-through, underline line-through | 对应 CSS text-decoration-line 属性，但阉割了 overline, blink 取值 |
textShadowColor | <color> | 对应 CSS text-shadow 属性中的颜色定义 |
textShadowOffset | { | 对应 CSS text-shadow 属性中的阴影偏移定义 |
textShadowRadius | <number> | 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义 |
includeFontPadding | <bool> | Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false |
textAlignVertical | auto, top, bottom, center | 对应 CSS vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值 |
fontVariant | small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums | 对应 CSS font-variant 属性，但取值更丰富 |
letterSpacing | <number> | 对应 CSS letter-spacing 属性 |
textDecorationColor | <color> | 对应 CSS text-decoration-color 属性 |
textDecorationStyle | solid, double, dotted, dashed | 对应 CSS text-decoration-style 属性，但阉割了 wavy 取值 |
writingDirection | auto, ltr, rtl | 对应 CSS direction 属性，增加了 auto 取值 |
Dimension 尺寸（6）
属性名 | 取值 | 描述 |
width | <number> | 对应 CSS width 属性 |
minWidth | <number> | 对应 CSS min-width 属性 |
maxWidth | <number> | 对应 CSS max-width 属性 |
height | <number> | 对应 CSS height 属性 |
minHeight | <number> | 对应 CSS min-height 属性 |
maxHeight | <number> | 对应 CSS max-height 属性 |
Positioning 定位（6）
属性名 | 取值 | 描述 |
position | absolute, relative | 对应 CSS position 属性，但阉割了 static, fixed 取值 |
top | <number> | 对应 CSS top 属性 |
right | <number> | 对应 CSS right 属性 |
bottom | <number> | 对应 CSS bottom 属性 |
left | <number> | 对应 CSS left 属性 |
zIndex | <number> | 对应 CSS z-index 属性 |
Margin 外部白（7）
属性名 | 取值 | 描述 |
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 内部白（7）
属性名 | 取值 | 描述 |
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 边框（20）
属性名 | 取值 | 描述 |
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 | { | 对应 CSS box-shadow 属性中的阴影偏移定义 |
shadowRadius | <number> | 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义 |
shadowOpacity | <number> | 对应 CSS box-shadow 属性中的阴影透明度定义 |
Background 背景（1）
属性名 | 取值 | 描述 |
backgroundColor | <color> | 对应 CSS background-color 属性 |
Transform 转换（3）
属性名 | 取值 | 描述 |
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 弹性盒（9）
属性名 | 取值 | 描述 |
flex | <number> | 对应 CSS flex 属性，但只能为整数值 |
flexGrow | <number> | 对应 CSS flex-grow 属性 |
flexShrink | <number> | 对应 CSS flex-shrink 属性 |
flexBasis | <number> | 对应 CSS flex-basis 属性 |
flexDirection | row, row-reverse, column, column-reverse | 对应 CSS flex-direction 属性 |
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, scroll | 对应 CSS overflow 属性，但阉割了 auto 取值 |
elevation | <number> | CSS中没有对应的属性，只在 Android5.0+ 上有效 |
resizeMode | cover, contain, stretch | CSS中没有对应的属性，可以参考 background-size 属性 |
overlayColor | string | CSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色 |
tintColor | <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
- 0xff00ff00 (0xrrggbbaa)：CSS 中无对应的值
- 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
}
});
PixelRatio 像素密度
在 React-Native 中，访问设备像素密度的方法由 PixelRatio 类提供。
我们的应用通常都会运行在不同的设备上，并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是：
- 定义了元素的边框为 1像素，而实际上在不同像素密度的设备上结果不一样，比如：iPhone6 显示为 2像素，iPhone6 Plus 显示为 3像素；
- 对于一个图片来讲，因为设备的像素密度不同，它也需要对应不同尺寸的规则，以防止图片过小变得模糊；
根据像素密度指定边框厚度
出于对产品体验的一致性，我们会要求不论是在哪种设备上，其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比：
var styles = StyleSheet.create({
box: {
borderWidth: 1 / PixelRatio.get(),
borderStyle: solid
}
});
上述代码将保证你的应用在所有的设备上（像素密度），都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度。