FlexBox

先推荐两篇阮一峰老师的博客：

Flex布局 语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex布局 实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

react native 样式表：

Flex 相关：

flex

flexDirection('row','column') // 排列方向水平，垂直

flexWrap('wrap','nowrap') //是否换行

alignItems('flex-start','flex-end','center','stretch') //垂直方向的位置

alignSelf('auto','flex-start','flex-end','center','stretch') //不遵循父样式，自己的样式

justifyContent('flex-start','flex-end','center','space-between','space-around') //水平方向的

边框宽度：

borderBottomWidth //底部边框宽度

borderLeftWidth //左边边框宽度

borderRightWidth //右边边框宽度

borderTopWidth //顶部边框宽度

borderWidth //所有边框宽度

边框颜色：

borderBottomColor //底边框的颜色

borderLeftColor //左边框的颜色

borderRightColor //右边框的颜色

borderTopColor //上边框的颜色

borderColor //全部边框的颜色

外边距：

marginBottom

marginLeft

marginRight

marginTop

marginVertical

marginHorizontal

margin

内边距：

paddingBottom

paddingLeft

paddingRight

paddingTop

paddingVertical

paddingHorizontal

padding

边框圆角：

borderTopLeftRadius

borderTopRightRadius

borderBottomLeftRadius

borderBottomRightRadius

borderRadius

宽，高，背景颜色：

width

height

backgroundColor

字体相关属性：

color字体颜色

fontFamily //字体族

fontSize //字体大小

fontStyle ('normal','italic') //字体样式

fontWeight("normal",'bold','100','200','300','400','500','600','700','800','900') // 字体粗细

letterSpacing //字符间隔

lineHeight //行高

textAlign("auto",'left','right','center','justify') //字体对齐方式

textDecorationLine("none",'underline','line-through','underline line-through') //上划线，下划线，删除线，

textDecorationStyle("solid",'double','dotted','dashed') //修饰线的类型

textDecorationColor //修饰的线的颜色

writingDirection("auto",'ltr','rtl')

图片相关属性：

resizeMode('cover','contain','stretch') //模式

overflow('visible','hidden') //超出部分是否显示，

hidden //为隐藏

tintColor //着色，rgb字符串类型opacity透明度

图像变换：

scaleX //水平方向缩放

scaleY //垂直方向缩放

rotation //旋转

translateX //水平方向平移

translateY //水平方向平移

阴影：

shadowColor //阴影颜色

shadowOffset //阴影偏移量

shadowOpacity //阴影透明度

shadowRadius //阴影圆角