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:隐藏)

你可能感兴趣的:(React Native组件Flexbox布局及样式style整理)