【问题标题】:How does the React Native "box model" work?React Native“盒子模型”是如何工作的?
【发布时间】:2017-07-13 09:40:43
【问题描述】:

在指定高度和/或宽度、填充和边框宽度时,React Native 大小组件的大小是否类似于 CSS border-box 框模型?

我刚刚学习 RN,在尝试向 iOS 应用程序添加自定义标头时,<View style={{ height: 44, paddingTop: 20 }}> 似乎没有产生我期望的 64pt 高度,改为height: 64, paddintTop: 20 让我更接近但实际上似乎大于所需的 64pt。

当然,我对尺寸错误的假设完全是凭经验的。我不知道如何实际测量渲染组件的大小以了解正在使用哪种盒模型方法。而且我没有在设备上运行任何东西,只是通过 iOS 模拟器,我不知道这是否会导致感知的大小问题。

我没有在文档中看到这一点,也没有在 Google 上找到答案。

【问题讨论】:

    标签: reactjs react-native


    【解决方案1】:

    不,它似乎使用content-box 模型。

    这似乎没有被记录,但是如果你在一个元素上设置一个宽度,然后给它添加填充,你会看到宽度增加了。

    更新: 据我所知,文档仍然不存在,但我发现 a code comment here(通过 this SO answer)确认 React Native 确实适用于 border-box 模型.

    【讨论】:

    • 我的问题是特定于高度的,添加填充时我无法调整高度。
    • @sellmeadog 你有什么解决办法吗?
    猜你喜欢
    • 2021-12-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-06
    • 2020-04-18
    • 2017-01-21
    相关资源
    最近更新 更多