React-Native 样式指南

原文出处：https://github.com/doyoe/react-native-stylesheet-guide





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

当前对应 RN 版本

0.44

目录

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

Properties 属性

Text 文本（18）

属性名	取值	描述
color		对应 CSS color 属性
fontFamily	string	对应 CSS font-family 属性
fontSize		对应 CSS font-size 属性
fontStyle	normal, italic	对应 CSS font-style 属性，但阉割了 oblique 取值
fontWeight	normal, bold 100~900	对应 CSS font-weight 属性，但阉割了 bolder, lighter 取值
lineHeight		对应 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		对应 CSS text-shadow 属性中的颜色定义
textShadowOffset	{ width:, height: }	对应 CSS text-shadow 属性中的阴影偏移定义
textShadowRadius		在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
includeFontPadding Android		Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false
textAlignVertical Android	auto, top, bottom, center	对应 CSS vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值
fontVariant iOS	small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums	对应 CSS font-variant 属性，但取值更丰富
letterSpacing iOS		对应 CSS letter-spacing 属性
textDecorationColor iOS		对应 CSS text-decoration-color 属性
textDecorationStyle iOS	solid, double, dotted, dashed	对应 CSS text-decoration-style 属性，但阉割了 wavy 取值
writingDirection iOS	auto, ltr, rtl	对应 CSS direction 属性，增加了 auto 取值

Dimension 尺寸（6）

属性名	取值	描述
width		对应 CSS width 属性
minWidth		对应 CSS min-width 属性
maxWidth		对应 CSS max-width 属性
height		对应 CSS height 属性
minHeight		对应 CSS min-height 属性
maxHeight		对应 CSS max-height 属性

Positioning 定位（6）

属性名	取值	描述
position	absolute, relative	对应 CSS position 属性，但阉割了 static, fixed 取值
top		对应 CSS top 属性
right		对应 CSS right 属性
bottom		对应 CSS bottom 属性
left		对应 CSS left 属性
zIndex		对应 CSS z-index 属性

Margin 外部白（7）

属性名	取值	描述
margin		对应 CSS margin 属性，不同的是，它只能定义一个参数，如需分别定义上、右、下、左4个方位的外补白，可以通过下面的单向外部白属性
marginHorizontal		无对应的 CSS 属性。其效果相当于同时设置 marginRight 和 marginLeft
marginVertical		无对应的 CSS 属性。其效果相当于同时设置 marginTop 和 marginBottom
marginTop		对应 CSS margin-top 属性
marginRight		对应 CSS margin-right 属性
marginBottom		对应 CSS margin-bottom 属性
marginLeft		对应 CSS margin-left 属性

Padding 内部白（7）

属性名	取值	描述
padding		对应 CSS padding 属性，不同的是，它只能定义一个参数，如需分别定义上、右、下、左4个方位的内补白，可以通过下面的单向内部白属性
paddingHorizontal		无对应的 CSS 属性。其效果相当于同时设置 paddingRight 和 paddingLeft
paddingVertical		无对应的 CSS 属性。其效果相当于同时设置 paddingTop 和 paddingBottom
paddingTop		对应 CSS padding-top 属性
paddingRight		对应 CSS padding-right 属性
paddingBottom		对应 CSS padding-bottom 属性
paddingLeft		对应 CSS padding-left 属性

Border 边框（20）

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

Background 背景（1）

属性名	取值	描述
backgroundColor		对应 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		对应 CSS flex 属性，但只能为整数值
flexGrow		对应 CSS flex-grow 属性
flexShrink		对应 CSS flex-shrink 属性
flexBasis		对应 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		对应 CSS opacity 属性
overflow	visible, hidden, scroll	对应 CSS overflow 属性，但阉割了 auto 取值
elevation Android		CSS中没有对应的属性，只在 Android5.0+ 上有效
resizeMode	cover, contain, stretch	CSS中没有对应的属性，可以参考 background-size 属性
overlayColor Android	string	CSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColor iOS		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 绝对长度单位，同时，你在定义时不需要加单位，例如：

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() 方法来返回设备的像素密度。

未完待续。。。