使用minHeight与flex一起创建意外的填充

Question

代码：

<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的值相同。

​

​

环境规划署：

• “博览会”："^17.0.0"，
• “反应”：“16.0.0-字母6”，
• “反应-原生”："https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz"，

iPhone和Android都是真正的设备。

Answer 1

使用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>

这是截图。

​

​