使用Flex框无法正确渲染组件高度

Question

我正在尝试使用React Native创建一个MapView组件，并为其提供了以下样式：

map: {
    flex: 1,
    width: vw,
    height: vh,
}

该组件将在导航栏和页脚之间完全呈现。

如何在导航栏和页脚之间以100％的高度渲染地图？

Answer 1

在css中使用calc()。

如果你的标题是 50px 高，你可以设置地图height: calc(100% - 50px;)

小提琴：https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/2/