reanct native样式大全

目录

布局写法

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, 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>	对应 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 取值
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 颜色

1. React-Native 支持了 CSS 中大部分的颜色类型：
2. #f00 (#rgb)
3. #f00c (#rgba)：CSS 中无对应的值
4. #ff0000 (#rrggbb)
5. #ff0000cc (#rrggbbaa)：CSS 中无对应的值
6. rgb(255, 0, 0)
7. rgba(255, 0, 0, 0.9)
8. hsl(360, 100%, 100%)
9. hsla(360, 100%, 100%, 0.9)
10. transparent
11. 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
    }
});