该系列文章记录下我学习reactnative的一些知识，如果有不对的地方请指出来。
前言
本文章记录下React Native中的布局方式FlexBox。
在React Native中布局采用的是FleBox(弹性框)进行布局。
需要注意的是在reactnative上面的尺寸是没有单位的，
width:100,height:100
在安卓上运行，会被解析成dp，在ios上会被解析成pt。
下面我们正式开始reactnative的布局学习。
Flex
我们先引入一张图来看下
image
通过该图我们可以看出来横向布局在reactnative上面被成为主轴，纵向布局被称为侧轴。
父视图属性(容器属性)
我们先来上一张表看下父视图有哪些属性。
| 属性 |
含义 |
| flexDirection |
父视图中的子元素的排序方式 |
| flexWrap |
是否允许子元素多行排列 |
| justifyContent |
子元素在父视图的主轴排序方式 |
| alignItems |
子元素在父视图的侧轴排序方式 |
下面我们对其属性进行一一的讲解
flexDirection
| 值 |
含义 |
column默认
|
排列方式，从上向下排列 |
| column-reverse |
从下向上排列 |
| row |
从左向右依次排列 |
| row-reverse |
从右向左依次排列 |
flexWrap
| 值 |
含义 |
nowrap默认
|
元素只排列在一行上，可能导致溢出 |
| wrap |
元素在一行排列不下时，就进行多行排列 |
justifyContent
| 值 |
含义 |
flex-start默认
|
元素在主轴上靠左排列，并且第一个元素与行首对齐 |
| flex-end |
元素在主轴上靠右排列，并且最后一个元素与行尾对齐 |
| center |
元素在主轴上居中排列 |
| space-between |
元素在主轴上平均分配，并且第一个元素与行首对齐，最后一个元素与行尾对齐 |
| space-around |
元素在主轴上平均分配，并且第一个元素与行首距离，最后一个元素与行尾距离为每个元素之间距离的一半 |
alignItems
| 值 |
含义 |
flex-start默认
|
元素向侧轴起点对齐 |
| flex-end |
元素向侧轴终点对齐 |
| center |
元素在侧轴居中 |
| stretch |
弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度 |
子视图属性
| 属性 |
含义 |
| alignSelf |
子元素位于父视图的位置 |
| flexWrap |
位于父视图的所占比重。类似于android中的linerlayout |
alignSelf
| 值 |
含义 |
auto默认
|
继承了它的父视图的 align-items 属性。如果没有父视图则为stretch
|
| stretch |
元素被拉伸以适应父视图 |
| center |
元素位于父视图的中心 |
| flex-start |
元素位于父视图的开头 |
| flex-end |
元素位于父视图的结尾 |
flex
其他布局
视图边框
| 属性 |
类型 |
含义 |
| borderBottomWidth |
number |
底部边框宽度 |
| borderLeftWidth |
number |
左边框宽度 |
| borderRightWidth |
number |
右边框宽度 |
| borderTopWidth |
number |
顶部边框宽度 |
| borderWidth |
number |
边框宽度 |
| borderColor |
color |
边框颜色 |
| borderRadius |
number |
边框圆角角度 |
尺寸
| 属性 |
类型 |
含义 |
| width |
number |
控件的宽度 |
| height |
number |
控件的高度 |
内边距
| 属性 |
类型 |
含义 |
| padding |
number |
内边距 |
| paddingHorizontal |
number |
左右内边距 |
| paddingVertical |
number |
上下内边距 |
| paddingLeft |
number |
左内边距 |
| paddingRight |
number |
右内边距 |
| paddingTop |
number |
上内边距 |
| paddingBottom |
number |
下内边距 |
外边距
| 属性 |
类型 |
含义 |
| margin |
number |
外边距 |
| marginHorizontal |
number |
左右外边距 |
| marginVertical |
number |
上下外边距 |
| marginLeft |
number |
左外边距 |
| marginRight |
number |
右外边距 |
| marginTop |
number |
上外边距 |
| marginBottom |
number |
下外边距 |
position
| 值 |
含义 |
| absolute |
绝对定位 |
| relative |
相对定位 |
边缘
| 属性 |
类型 |
含义 |
| left |
number |
当position为absolute时,距离父布局的左边距,当position为relative时,距离上一个元素的左边距 |
| right |
number |
当position为absolute时,距离父布局的右边距,当position为relative时,距离上一个元素的右边距 |
| top |
number |
当position为absolute时,距离父布局的上边距,当position为relative时,距离上一个元素的上边距 |
| bottom |
number |
当position为absolute时,距离父布局的下边距,当position为relative时,距离上一个元素的下边距 |
阴影
| 属性 |
类型 |
含义 |
shadowColorios
|
color |
阴影颜色 |
shadowOffsetios
|
width: number, height: number |
阴影的宽高 |
shadowOpacityios
|
number |
阴影的透明度 |
shadowRadiusios
|
number |
阴影的角度 |
elevationAndroid
|
number |
阴影在z轴的高度 |
网友评论