使用 flexbox 响应布局

Question

我是 react native 的初学者，我正在尝试实现这种布局：

问题是：如果我同时制作 flex:1 ，上框将始终为一半高度，但我希望它包裹的内容更小，并增长到屏幕的一半

我试过这个配置：

UPPER: flex: 0, flexShrink: 2
LOWER: flex: 1, flexShrink: 2

这样，上面的盒子先包裹然后再增长，但不会停在一半。

我试过这个配置：

UPPER: flex: 0, flexGrow: 2
LOWER: flex: 1, flexGrow: 2

在此配置中，它会增长到一半，但如果更小则不会换行。

我怎样才能实现这样的行为？

非常感谢

Answer 1

使用 maxHeight 属性来限制高度。

UPPER: flex: 0, maxHeight: '50%'
LOWER: flex: 1

样式表示例

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  upper: {
    flex: 0,
    maxHeight: '50%',
  },
  lower: {
    flex: 1,
  },
});