ios - 在不同的显示器上 react native 相同大小的圆圈

标签 ios iphone flexbox geometry react-native

我是 React Native 的新手,我对 flexbox 如何自动使内容适合屏幕大小感到非常满意。

只要我使用正方形,这就很好用,但是当涉及到圆形时,我似乎必须使用像素指定圆形的大小。 当开发到不同的屏幕尺寸时,这显然不是最优的。

我试过像这样使用 PixelRatio:

height: 90 * pixelRatio,
width: 90 * pixelRatio,
borderRadius: 45 * pixelRatio,

这使它变得更好一些,但在 Iphone 6 和 Iphone 6 plus 上显示的圆圈大小似乎仍然存在巨大差异。

有什么方法可以像使用正方形一样使用 flexbox 自动创建圆的大小?

或者是否有另一种方法可以确保圆圈在不同设备上显示相同?

最佳答案

据我所知,您输入的宽度和高度值是与设备无关的像素。这意味着它们将根据手头设备的像素密度进行缩放。 pixelRatio 将使它极度依赖于设备。 必须在没有 pixelRatio 因素的情况下尝试

height:90,
width:90,
borderRadius:45

关于ios - 在不同的显示器上 react native 相同大小的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33379141/

相关文章:

iphone - 先做逻辑,后做外观,在 iOS 开发中是否运作良好?

html - 使 Bootstrap 4 中的 flex 类占据表格单元格父级的全高

css - 限制图像的最大高度,这取决于其 sibling 的高度

css - Safari flexbox 行为不同,使元素变粘?

ios - 几天后PFUser currentUser返回null

ios - 将 datePicker 日期和计时器与用户日期和时间匹配 (swift3)

ios - 构建成功后将文本文件安装/导入到物理设备时 Xcode 崩溃 (RangeException)

iphone - 将 MKUserLocation 类类型转换为 MKAnnotation 协议(protocol)

ios - PDF 到 Apple 报亭

asp.net - AES128 位加密字符串与 .net 上的不相似