ReactNative之样式手册
字数 2.1k / 9 min 读完 / 阅读在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为 style 的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将 background-color 改为 backgroundColor。以下备忘一下，常用的样式和用法说明。
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 属性 |
| zIndex | <number> |
对应 CSS 中的 z-index 属性 |
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 取值，默认值是 column 而不是 row |
| 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 取值，默认值是 stretch 而不是 flex-start，stretch 只有在不设置尺寸的时候才生效 |
| 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)transparentColor Name：支持了基本颜色关键字和拓展颜色关键字，但不支持 28 个系统颜色
Number 数值
在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位
UI 自适应问题
在 React-Native 中，支持百分比单位和无单位的方式，无单位即 pt 绝对长度单位，例如：
<View style={{ width: 100, height: 50 }}></View>;
var styles = StyleSheet.create({
box: {
width: 100,
height: 50,
},
});
未达到不同设备的 UI 自适应目的，我们通过等比缩放 UI 的尺寸大小，来实现不同设备的 UI 兼容问题：
const UiBaseWidth = 750; // 以iphone6为例等比缩放
const px2dp = (UiPx) =>
Math.floor(((UiPx * screenWidth) / UiBaseWidth) * 10) / 10; // 根据设计稿转换，向下取整保留一位小数
踩坑！！！
1. 文字垂直居中(lineHeight 设置的数值实际上会离奇的多出 0.667)
想要如下图的效果：
想法：使用lineHeight实现
设置外部容器height: 36
想让中间字体垂直居中，扣去上下两个边框的宽度，应该设置lineHeight: 34
发现底部的边框明显少了一部分，查看元素发现一个 bug：
结论
- 如果不设置 lineHeight，Text 元素的高度也是
fontSize + 0.667- 最好的文字垂直居中方式：Text 外再包一层 View，在 View 上用
flex布局。如下图所示：
2. zIndex 调整层级无效(绝对定位的同级元素)
实际在使用 zIndex 属性的时候发现根本没有效果，跟 web 的 z-index 所呈现的效果完全不一样
解决方法：
改变元素的顺序，而不使用 zIndex。默认情况下，使用了position: 'absolute'后，在后面的元素会覆盖在前面的元素之上
全文完。
