ReactNative开发——flexbox布局
flexbox(弹性盒)是W3C提出的UI设计模型规范的一种实现,有布局神器的美誉。ReactNative实现了其中的大部分功能。
位置及宽高样式键
键 | 取值 |
---|
position | 它的取值是字符串类型,取值可以是releative(默认)或者absolute,表示当前描述的位置是相对定位还是绝对定位 |
top | 数值类型,当position为absolute时,表示组件距离父组件最上沿多少ptx显示,当position为releative时表示距离上一个同级组件的最上沿多少pt |
left | 数值类型,当position为absolute时,表示组件距离父组件最左沿多少pt显示,当position为releative时表示距离上一个同级组件的最左沿有多少pt |
bottom | 数值类型,当position为absolute,表示距离父组件的最下沿多少pt显示,当position为releative时不可用 |
right | 数值类型,当position为absolute,表示距离父组件的最右沿多少pt显示,当position为releative时不可用 |
width | 数值类型,表示宽 |
height | 数值类型,表示高 |
minHeight,maxHeight | 数值类型,表示高度的最小值与最大值 |
minWidth,maxWidth | 数值类型,表示宽度的最小值与最大值 |
决子组件排列规则的键
键 | 取值 |
---|
flexDirection | flexDirection键决定了组件内部的子组件式如何排列的,它的取值可以为row、colum。row代表横向排列,colum表示纵向排列 |
flexWrap | 它可以取2个字符串中的一个[‘wrap’,’nowrap’],默认值是nowrap,表示不会自动换行(换列) |
justifyContent | justifyContent键用来定义在一个方向上如何排列子组件,他有5中可能的字符串类型值:flex-start,flex-end,center,space-between,space-aroud |
alignItems | alignItems键定义了View组件中的所有子组件的对齐规则,他有4中可能的字符串类型值:flext-start,flext-end ,center,stretch |
决定子组件显示规则的键
键 | 取值 |
---|
flex | 当他的值为1时,子组件将自动缩放适应父组件留下的空白空间,开发者使用flex时,要格外的小心,它的自动缩放意味着不仅可以改变自己的宽、高与位置,还可以改变与它同级的其他组件的位置 |
alignSelf | alignSelf键有5种可能的字符串类型值:auto,flex-start,flex-end,center,stretch。其用途是让组件忽略它的父组件样式中alignItems键的取值,当取值为auto时,表示使用父View组件的alignItems值,其他4个值的含义与alignItems中对应的值含义相同 |
边框、空隙与填充
我们可以指定一个组件的边框(border)、空隙(margin)和填充(padding)的各种属性(如果支持的话)。
键 | 取值 |
---|
borderWidth | 表示边框的宽度 |
borderTopWidth | 表示边框的顶部宽度 |
borderRightWidth | 边框的右边宽度 |
borderBottomWidth | 边框的底部宽度 |
borderLeftWidth | 边框的左边宽度 |
padding | 填充宽度 |
paddingHorizontal | 左右填充宽度 |
paddingVertical | 上下填充宽度 |
paddingBottom | 下填充宽度 |
paddingLeft | 左填充宽度 |
paddingRight | 右填充宽度 |
paddingTop | 上填充宽度 |
margin | 空隙宽度 |
marginHorizontal | 左右空隙宽度 |
marginVertiacl | 上下空隙宽度 |
marginBottom | 下空隙宽度 |
marginLeft | 左空隙宽度 |
marginRight | 右空隙宽度 |
marginTop | 上空隙宽度 |