reactjs - React Native "box model"是如何工作的?

标签 reactjs react-native

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

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

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

我没有在文档中看到对此的解释,也没有在 Google 上找到答案。

最佳答案

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

这似乎没有记录,但如果您在元素上设置宽度然后向其添加填充,您会看到宽度增加。

更新: 据我所知,文档仍然不存在,但我发现 a code comment here (通过 this SO answer )确认 React Native 确实可以在 border-box 模型下工作。

关于reactjs - React Native "box model"是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42406752/

相关文章:

javascript - React Native this2 .'function' 不是函数

android - 找不到 com.android.tools.build :gradle:2. 3.+ 的任何匹配项,因为没有可用的 com.android.tools.build:gradle 版本

reactjs - react native 转换 - 错误找不到预设“babel-preset-react-native-stage-0

javascript - 需要帮助在二维数组上构建带有 JSX 标签的双 for 循环

reactjs - 我应该在 React : functional components or class base components? 中使用什么类型的组件

javascript - react 警告 : Functions are not valid as a React child

javascript - 未触发操作 - React-Redux 计数器示例

reactjs - 在 View 和 listView 之间创建透明边距

javascript - 加载器图标不断显示在我的 App.JS 中

reactjs - Raect中的Swiper js如何在MouseEnter上停止自动播放并在MouseLeave上启动它