将 minHeight 与 flex 一起使用会产生意外的填充
Using minHeight with flex creates unexpected padding
代码:
<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>
截图:
注意底部的白色 space。两个子View并没有填满父View。
这仅在添加 minHeight: 50
时发生。
白色的高度space好像和minHeight
的值一样.
环境:
- "expo": "^17.0.0",
- "react": "16.0.0-alpha.6",
- "react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",
真实设备,iPhone 和 Android。
使用 flexGrow 而不是 flexible。下面给出了工作示例。
<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>
这是屏幕截图。
代码:
<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>
截图:
注意底部的白色 space。两个子View并没有填满父View。
这仅在添加 minHeight: 50
时发生。
白色的高度space好像和minHeight
的值一样.
环境:
- "expo": "^17.0.0",
- "react": "16.0.0-alpha.6",
- "react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",
真实设备,iPhone 和 Android。
使用 flexGrow 而不是 flexible。下面给出了工作示例。
<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>
这是屏幕截图。