0

代码:

<View style={{ flex: 1, borderColor: 'orange', borderWidth: 5 }}>
    <View style={{ flex: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
    <View style={{ flex: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

截屏:

注意底部的空白区域。两个子视图不填充父视图。这仅在minHeight: 50添加时发生。空白的高度似乎与 的值相同minHeight

资产

环境:

真实设备,包括 iPhone 和 Android。

4

1 回答 1

2

使用 flexGrow 而不是 flex。下面给出了工作示例。

<View style={{ flexGrow: 1, borderColor: 'orange', borderWidth: 5 }}>
   <View style={{ flexGrow: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5 }} />
   <View style={{ flexGrow: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5 }} />
</View>

这是屏幕截图。

flexGrow 与 minHeight

于 2017-06-13T10:32:25.513 回答