2020-5-6 React Native 的flex布局探究

React Native是通过 yoga 作为跨平台的布局引擎(layout engine)， yoga 是Flexbox的一种在原生端的实现，所以RN的布局只能使用flex布局，而且在原生的实现没有在浏览器端的实现度那么高，不是所有语法都支持，并且有些还与浏览器端有差异。

官方文档中介绍 flex 时说：

• 当flex为正值

flex: <positive number>
equates to
flexGrow: <positive number>
flexShrink: 1
flexBasis: 0

---

When flex is 0, the component is sized according to width and height and it is inflexible.

• 当flex为 0 时，组件尺寸由width和height决定，此时不再具有弹性

---

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.

• 当flex为-1 时，组件尺寸一般还是由width和height决定。但是当空间不够时，组件尺寸会收缩到minWidth和minHeight所设定的值。

---

flexGrow, flexShrink, and flexBasis work the same as in CSS.

• flexGrow、flexShrink、flexBasis 与 CSS 上表现一致。

---

react-native中的flex和flexGrow、flexShrink 的区别：
见 https://blog.csdn.net/m0_37058714/article/details/80765562

---

display 属性：

It works similarly to display in CSS, but only support 'flex' and 'none'. 'flex' is the default.

只支持flex（默认）和 none
不支持display: inline-flex

---

maxHeight、maxWidth、minHeight、minWidth:
它们的表现和 CSS 上的max-height、max-width、min-height、min-width类似，但是在 React Native 上只能使用逻辑像素值（数字单位）或百分比，而不能使用 em 或是任何其他单位

https://zhoon.github.io/css3/2014/08/23/flex.html

---

在web中

设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时子元素宽度会比实际设置的宽度小，你设置的宽度就会不生效。
解决办法，子元素上设置：

width: 120px;
flex-shrink: 0;

原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应
所以，倘若给父元素设置了flex布局后，若要其子元素的width有效果，必须给子元素设置flex-shrink为0。