先推荐两篇阮一峰老师的博客:
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 //阴影圆角