【问题标题】:Component height not rendering properly with Flex box使用 Flex 框无法正确渲染组件高度
【发布时间】:2015-11-02 19:13:23
【问题描述】:

我正在尝试使用 React Native 创建一个 MapView 组件,并为其赋予了以下样式:

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

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

如何让地图在导航栏和页脚之间以 100% 的高度呈现?

【问题讨论】:

    标签: css flexbox react-native


    【解决方案1】:

    在 css 中使用 calc()

    例如,如果您的标题 50px 高,您将设置地图height: calc(100% - 50px;)

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

    【讨论】:

    • 这在 React Native 中给出了解析器错误。可能与 jsx 有关,但它不起作用
    • 感谢您将其放在一起——我了解解决方案,但似乎 jsx 发生了语法解析器冲突
    • 我不知道 jsx 是什么,所以可能是问题所在,请将 jsx 添加到您的标签中以帮助完善您的问题,以便了解 jsx 的人可以帮助您。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-25
    • 2019-07-21
    • 2020-06-13
    相关资源
    最近更新 更多