布局写法
外联布局：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 尺寸
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 颜色
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
}
});
