React Native：带有 flexbox 的与设备无关的正方形网格答案

【问题标题】：React Native: Device Independent grid of squares with flexboxReact Native：带有 flexbox 的与设备无关的正方形网格
【发布时间】：2020-03-03 21:39:38
【问题描述】：

如果用户有 iPad 或 iPhone，我想用正方形独立显示相同的网格，相应地增加正方形的大小。

我不想检测设备并根据屏幕尺寸更改方块的宽度和高度。是否可以只使用 React Native 的 css flex 功能？

这里 rnplay example

【问题讨论】：

标签： reactjs react-native flexbox

【解决方案1】：

有一个技巧可以让你使用flexbox实际创建一个正方形网格——也许你可以将它用于 React Native。

示例：

首先，我创建了一个flexbox，其中包含一行中的 3 个框，这些框包含在多行中：
```
.flexbox {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.flexbox > * {
  margin: 5px;
  text-align: center;
  border: 1px solid red;
  flex-basis: calc(33.33% - 10px);
}
```
注意flex-basis: calc(33.33% - 10px) 允许在一行中保留 3 个框 - 更改此设置以容纳更多框。（10px 这里是边距的两倍）。
这是使它们成为正方形的技巧 - 制作一个具有 padding-bottom: 100% 的伪 inline-block 元素。（如果你以百分比给出填充/边距，那么它总是相对于宽度）
```
.flexbox > *:before {
  content: '';
  padding-bottom: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
```

让我知道您对此的反馈。谢谢！

body {
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.flexbox {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.flexbox > * {
  margin: 5px;
  text-align: center;
  border: 1px solid red;
  flex-basis: calc(33.33% - 10px);
}
.flexbox > *:before {
  content: '';
  padding-bottom: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<body>
  <div class="flexbox">
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
    <div>some text here</div>
  </div>
</body>

【讨论】：

看起来 flexBasis 最近被添加到 React Native 但没有记录。您应该尝试使用它，但是，鉴于flexBasis 需要一个数字作为道具，我不确定如何模拟calc(33.33% - 10px)。
哦原来flexBasis 在 0.34.0-rc 上。 github.com/facebook/react-native/releases/tag/v0.34.0-rc.0
好吧，对react native了解不多...希望这个答案可以帮助您找到方法... :)
供您参考：如果flex-basis 不起作用，您也可以使用min-width: calc(33.33% - 10px) 甚至width: calc(33.33% - 10px)...猜想calc 可以以某种方式模拟...跨度>
他很可能需要计算width。

【解决方案2】：

当前（撰写本文时为 0.33.0）flexbox capabilities of React Native（使用 flexDirection 和 flex）只能为您提供均匀的宽度或高度，但不能同时提供两者。为什么不想用Dimensions来测量屏幕尺寸呢？

【讨论】：

Dimension 是我现在正在做的扩大正方形的方法，但在我看来，根据屏幕宽度和高度计算固定尺寸的方法是错误的。
如果您查看我在 @kukkuz 的回答中写的 cmets，您也许可以尝试使用 0.34.0-rc 上的 flexBasis 属性，但它看起来像您无论如何，仍然需要手动测量 33% 的宽度减去一些边距。在这种情况下，手动测量尺寸并没有错，并且在（主要是原生）移动开发中测量尺寸是一种非常普遍的做法。
@Ronnie，您介意分享您如何进行测量的代码吗？可能有更简单的方法来进行计算。

【解决方案3】：

添加

aspectRatio: 1

如果宽度或高度已经由flex: 1 设置，则在组件的样式中，它将为您生成其他值！

【讨论】：