React Native中的 Flex 与 flexGrow 与 flexShrink 与 flexBasis 对比

React Native 中的 Flexbox 布局与属性解释

在 React Native 中，布局使用的是 Flexbox 帜局技术。这种布局方式主要通过 flex, flexGrow, flexShrink 和 flexBasis 等属性来控制组件的尺寸和位置。下面我会详细比较这些属性。

1. flex

flex 属性是 flexGrow, flexShrink 和 flexBasis 的简写。它可以接受一个到三个参数，用来设置组件的扩展和收缩行为以及基础尺寸。

• 当只有一个值时，这个值会被应用于 flexGrow，而 flexShrink 默认为 1，flexBasis 默认为 0%。
• 当有两个值时，第一个值设置 flexGrow，第二个值设置 flexShrink，flexBasis 仍旧默认为 0%。
• 当有三个值时，分别对应 flexGrow, flexShrink, flexBasis。

例如，flex: 1 表示组件可以扩展填满剩余空间，收缩因子为 1，基础尺寸为 0%。

2. flexGrow

flexGrow 属性定义了组件在父容器剩余空间中的扩展比例。其默认值为 0，表示如果存在剩余空间，该组件不会扩展来占用更多空间。

例如，如果一个容器内有两个子组件，其中一个设置了 flexGrow: 1，另一个未设置或设置为0，则设置了 flexGrow: 1 的组件将占据所有剩余空间。

3. flexShrink

flexShrink 属性定义了组件在必要时的收缩比例。默认值为 1，表示在空间不足时，该组件会收缩以适应父容器的空间。

例如，假设父容器空间不足以容纳所有子组件，设置了 flexShrink: 1 的组件将会按比例减少它的尺寸。

4. flexBasis

flexBasis 属性定义了组件在不伸缩前的默认大小。可以是具体的值如 10%, 50px 或 auto（自动根据内容大小）。默认值是 auto。

例如，设置 flexBasis: 100px，则组件在伸缩之前将保持 100px 大小，然后根据 flexGrow 和 flexShrink 进行调整。

示例应用场景

假设我们有一个水平排列的容器，里面有三个子元素。我们希望第一个元素固定宽度为 100px，第二个元素填满剩余空间，第三个元素内容多大就显示多大。我们可以这样设置：

jsx
<View style={{ flexDirection: 'row', height: 50 }}>
  <View style={{ width: 100, backgroundColor: 'red' }} />
  <View style={{ flex: 1, backgroundColor: 'green' }} />
  <View style={{ flexBasis: 'auto', backgroundColor: 'blue' }} />
</View>

这里，第一个元素通过固定宽度实现布局，第二个元素通过 flex: 1 填满剩余空间，第三个元素通过 flexBasis: auto 保持内容宽度。

结论

通过合理使用 flex, flexGrow, flexShrink, flexBasis，我们可以实现复杂的布局需求，使界面在不同屏幕尺寸和方向下都能保持良好的布局效果。