目录
布局写法
React-Native 样式指南
Properties 属性
Text 文本
Dimension 尺寸
Positioning 定位
Margin 外部白
Padding 内部白
Border 边框
Background 背景
Transform 转换
Flexbox 弹性盒
Other 其他
Valuse 取值
Color 颜色
Number 数值
Units 单位
Pt 点
布局写法
外联布局:style={styles.container}
内联布局:style={{flex:1,width:50,height:100}}
多个布局:style={[styles.container,{width:50,height:100}]}
React-Native 样式指南
React-Native
的样式基本上是实现了 CSS
的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native
之前,可以先简要了解一下。
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 , justify iOS | 对应 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 尺寸
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 | [{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
}
});