React Native组件Flexbox布局及样式style整理

一、Flexbox布局
1.布局方向flexDirection

column：竖直从上到下（默认）
column-reverse：竖直从下到上
row：水平从左到右
row-reverse：水平从右到左

2.竖轴上对齐方式alignItems

flex-start：顶对齐
flex-end：底对齐
center：居中对齐
baseline：项目第一行文字基线对齐
stretch： 如果项目未设置高度或设为auto，将占满整个容器的高度。

3.横轴上对齐方式justifyContent

flex-start：左对齐（默认）
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目间隔相等
space-around：每个项目两侧间隔相等

4.换行类型flexWrap

nowrap：不换行
wrap：换行，首行在上
wrap-reverse：换行，首行在下

5.alignContent

stretch：元素被拉伸以适应容器（默认值）
center：居中
flex-start：元素位于容器的开头
flex-end：元素位于容器的结尾
space-between：元素位于各行之间留有空白的容器内
space-around：元素位于各行之前、之间、之后都留有空白的容器内

二、样式style
1.宽高

//指定宽高
width: 宽度
height：高度
//弹性（Flex）宽高
flex

2.Text样式

color：字体颜色
fontFamily：字体名称
fontSize：字体大小
fontWeight：字体粗细('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
fontStyle：字体样式('normal', 'italic')
fontVariant：字体变化
letterSpacing ：字间距
lineHeight：行间距
textAlign：文本对齐方式('auto', 'left', 'right', 'center', 'justify')
textAlignVertical：文本在容器中位置
textDecorationColor
textDecorationLine：字体装饰线('none', 'underline', 'line-through','underline line-through')
textShadowColor：字体阴影颜色
textShadowOffset：设置阴影效果
textShadowRadius：字体阴影效果圆角

3.常用属性

position：位置（absolute，relative）
left
right
top
bottom
padding
paddingLeft
paddingRight
paddingHorizontal
paddingTop
paddingBottom
paddingVertical
margin
marginLeft
marginRight
marginHorizontal
marginTop
marginBottom
marginVertical
backgroundColor
opacity （number）不透明度

4.边框

//边框样式borderStyle 
solid：实线
dotted：点状线
dashed：虚线
//边框圆角半径
borderRadius
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
//边框颜色
borderColor
borderTopColor
borderBottomColor
borderLeftColor
borderRightColor
//边框宽度
borderWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderBottomWidth

5.其他

alignSelf该属性允许项目有自己的对其方式，可覆盖父元素alignItems属性,(auto：表示继承父元素alignItems属性其余和alignItems属性完全一致)
overflow设置内容超过容器时显示还是隐藏(visible：显示,hidden：隐藏)