布局写法
外联布局:style={styles.container}
内联布局:style={{flex:1,width:50,height:100}}
多个布局:style={[styles.container,{width:50,height:100}]}
React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致。
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 属性 |
Margin 外部边距
属性名 | 取值 | 描述 |
---|---|---|
margin | number | 只能定义一个参数,用以表示上、右、下、左4个方位的外边距 |
marginHorizontal | number | 等同于同时设置marginRight 和 marginLeft |
marginVertical | number | 等同于同时设置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 | 只能定义一个参数,用以表示上、右、下、左4个方位的内部边距 |
paddingHorizontal | number | 等同于同时设置paddingRight 和 paddingLeft |
paddingVertical | number | 等同于同时设置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 取值 |
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 绝对长度单位,默认缺省了 pt
单位。
例如:
<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
box: {
width: 100,
height: 50
}
});