ReactNative中的布局

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’