React Native 的 flexbox 中是不是存在与 box-sizing:border-box 等价的东西？

Posted 2023-03-06

【中文标题】React Native 的 flexbox 中是不是存在与 box-sizing:border-box 等价的东西？

【英文标题】：Does it exist an equivalent of box-sizing: border-box in flexbox for React Native?React Native 的 flexbox 中是否存在与 box-sizing:border-box 等价的东西？

【发布时间】：2016-11-25 00:00:08

【问题描述】：

我希望我的盒子的大小不会被边距和内边距改变。

【问题讨论】：

嗯...我所看到的默认情况下可以使用 box-sizing。参见示例：rnplay.org/apps/GF43cw

【参考方案1】：

react native 没有选项

 boxSixing: "border-box"

你可以在你的造型中做的是这个

<View style= 
    flex: 1,
    alignContent: "center",
    justifyContent: "center",
>
    <View style= 
        flex: 1,
        width: "95%" // or width of the box - intended margin
    >
        ***chi;dren goes here***
    <View/>
<View/>

进入该视图的任何组件都将位于中心，边距为 5% 或指定什么，这暂时解决了问题，直到 react-native 提供更好的解决方案

【参考方案2】：

正如另一个答案中提到的，在 React Native 中，一切都被视为好像设置了box-sizing: border-box。 模拟 css content-box 的一种解决方法是将您的组件包装在容器 View 中，并将您的边框和填充添加到该 View。

【参考方案3】：

令 O (for outer) = (top, left, bottom, right) 为代表大小的矩形 * 和视图的位置 V. 由于所有 React Native 视图的 box-sizing 都是border-box，因此任何 * V 的边框将呈现在 O 内部。

【参考方案4】：

React Native 为所有视图设置样式，就像设置了 box-sizing: border-box 一样。见此代码：https://github.com/facebook/react-native/blob/5aa1fb3ff326a429e33a443576da866f2a63c20c/Reactandroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L632

【讨论】：

虽然，这表现得很奇怪，就像width: "100%", height: "100%" 的absolute 孩子会出现在padding 值之后

【参考方案5】：

你可以使用 resizeMode: 'cover' or 'stretch' or 'contain'

【讨论】：

不同的选项有什么作用？ cover、vs、stretch、vs contains 有什么作用？您是否有指向文档的链接以显示这些选项的含义？

那不只是图片吗？