在不同的显示器上反应原生相同大小的圆圈答案

【问题标题】：React Native same size circle on different displays在不同的显示器上反应原生相同大小的圆圈
【发布时间】：2016-01-27 12:33:47
【问题描述】：

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

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

我尝试过像这样使用 PixelRatio：

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

这使它稍微好一点，但在 Iphone 6 和 Iphone 6 plus 上显示的圆圈大小似乎仍然存在巨大差异。

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

或者是否有其他方法可以确保圆圈在不同设备上显示相同？

【问题讨论】：

【解决方案1】：

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

height:90,
width:90,
borderRadius:45

【讨论】：

感谢您的回答。你是对的 - 删除 pixelRatio 确实使差异更小，但在 Iphone 5s 和 6s plus 上显示圆圈的方式似乎仍然存在很大差异。如果有一种方法可以让圆圈使用 flexbox 跟随父视图的大小，那就太好了。
您可以创建一个向父级弯曲的视图，并使用 onLayout 属性获取宽度/高度并相应地设置边框半径。如果我们有 % 表示，事情会容易得多，但是 react-native 还没有