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’