ReactNative中的布局

2017-09-13 08:20:31来源:CSDN作者:xjz729827161人点击

分享

ReactNative的布局模型

写的好,点个赞吧!写的不好,帮忙指出内容的不足,灰常感谢,希望与同行进行交流~~

ReactNative采用的布局模型是css中的flex模型,对其做了一点点的改动,因此,会先介绍CSS的flex布局模型,然后再简单的说明差异

CSS中的Flex布局模型

需要注意的是flex布局模型只是显示模型中的一种,不能误以为css只能这么做

网上有一篇文章写的贼好,把该说的都说清楚了。我就不做重复工作了。
戳这里

总结下布局其所做的事情:
1. 决定主轴方向
2. 决定主轴子元素对齐方式
3. 决定次轴子元素对齐方式
4. 当主轴上满了时,是否进行换行
5. 子元素修改自身对齐方式
6. 子元素分享剩余空间(正,负分享)

ReactNative支持的属性


Reactnative样式官网地址

对css flex 支持不全,列出差异性

样式 作用 Reactnative 可选值 默认值
flex-direction 指定主轴方向 支持 ‘row’, ‘row-reverse’, ‘column’, ‘column-reverse’ column
flex-wrap 是否换行 支持 ‘wrap’, ‘nowrap’ nowrap
flex-flow 上面两个属性简写
justify-content 主轴上对齐 支持 ‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’ flex-start
align-items 次轴上对齐 支持 ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’ stretch
align-content 多条轴线的对齐 不支持
order 沿主轴方向 不支持
flex-grow 占剩下空间比例 支持 整数 0
flex-shrink 空间不够缩减的比例 支持 整数 1
flex-basis 项目占主轴空间 支持 整数
flex 多个属性的简写 意义变化(下方有备注)
align-self 覆盖次轴的对齐方式 支持 ‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’ auto

当flex取正整数值时, is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.
When flex is 0, the component is sized according to width and height and it is inflexible.
When flex is -1, the component is normally sized according width and height. However, if there’s not enough space, the component will shrink to its minWidth and minHeight.


列出通用的属性写法,与原生多数类似,长度的单位都是逻辑像素,相当于dp

作用 样式 备注
宽高 weidht,height,minheight,maxheight,
minwidth,maxwidth
多了最大最小
外边距 margin,marginTop,marginLeft,marginBottom,
marginRight,marginHorizontal,marginVerticall
多了垂直和水平外边距两种写法
内边距离 padding,paddingLeft,paddingBottom,paddingTop,
paddingRight,paddingHorizontal,paddingVerticall
多了垂直和水平内边距两种写法
边框宽度 borderBottomWidth, borderLeftWidth,borderRightWidth ,
borderTopWidth ,borderWidth
这个也是新增的,相对于android
相对位置 left,top,right,bottom 相对自身的原始位置,或者是父控件的位置,取决于position属性
相对位置的基准 position ‘absolute’(相对于父控件), ‘relative’(相对于自身)
层叠顺序 zindex 当重叠的时候怎么进行展示,值越大越处于上面
溢出处理 overflow 当控件超出边界的时候着进行处理,有 ‘visible’, ‘hidden’, ‘scroll’

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台