Can
Be Better

React-Native 样式指南

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

Properties 属性

Text 文本

属性名 取值 描述
color <color> 对应 CSS 中的 color 属性
fontFamily string 对应 CSS 中的 font-family 属性
fontSize <number> 对应 CSS 中的 font-size 属性
fontStyle normalitalic 对应 CSS 中的 font-style 属性,但阉割了 oblique 取值
fontWeight normalbold 100~900 对应 CSS 中的 font-weight 属性,但阉割了 bolder, lighter 取值
lineHeight <number> 对应 CSS 中的 line-height 属性
textAlign autoleftrightcenterjustifyiOS 对应 CSS 中的 text-align 属性,增加了 auto 取值
textAlignVerticalAndroid autotopbottomcenter 对应 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 noneunderlineline-throughunderline line-through 对应 CSS 中的 text-decoration-line 属性,但阉割了 overlineblink 取值
textDecorationStyleiOS soliddoubledotteddashed 对应 CSS 中的 text-decoration-style 属性,但阉割了 wavy 取值
writingDirectioniOS autoltrrtl 对应 CSS 中的 direction 属性,增加了 auto 取值

Dimension 尺寸

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

Positioning 定位

属性名 取值 描述
position absoluterelative 对应 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 soliddotteddashed 对应 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 visiblehidden 对应 CSS 中的 backface-visibility 属性

Flexbox 弹性盒

属性名 取值 描述
flex <number> 对应 CSS 中的 flex 属性
flexDirection rowcolumn 对应 CSS 中的 flex-direction 属性,但阉割了 row-reverse, column-reverse 取值
flexWrap wrapnowrap 对应 CSS 中的 flex-wrap 属性,但阉割了 wrap-reverse 取值
justifyContent flex-startflex-endcenterspace-betweenspace-around 对应 CSS 中的 justify-content 属性,但阉割了 stretch 取值。
alignItems flex-startflex-endcenterstretch 对应 CSS 中的 align-items 属性,但阉割了 baseline 取值。
alignSelf autoflex-startflex-endcenterstretch 对应 CSS 中的 align-self 属性,但阉割了 baseline 取值

Other 其他

属性名 取值 描述
opacity <number> 对应 CSS 中的 opacity 属性
overflow visiblehidden 对应 CSS 中的 overflow 属性,但阉割了 scroll, auto 取值
elevationAndroid <number> CSS中没有对应的属性,只在 Android5.0+ 上有效
resizeMode covercontainstretch 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
    }
});

不开启评论,如有问题疑问请发邮件。i@ltq.im最长的路 » React-Native 样式指南