在反应本地创建css圈

Question

我在创建反应本地的css圈时遇到了一些麻烦。以下的作品在iPhone 6 Plus中，但在所有其他iPhone中，它们都变成了钻石。

circle: { 
    height: 30, 
    width: 30, 
    borderRadius: 30, 
} 

现在如果我使用PixelRatio上borderRadius它在一切，但iPhone 6加。 iPhone 6加上它作为圆角的盒子呈现。

circle: { 
    height: 30, 
    width: 30, 
    borderRadius: 30/PixelRatio.get(), 
} 

Answer 1

borderRadius应该是正方形的一半。因此，15你的情况 - 无论该设备的像素比例。

它适用于30/PixelRatio.get()只适用于2x视网膜设备，结果为15. 然后对于iPhone 6 Plus，由于结果为10（像素比率为3），您确实会得到一个四舍五入的方框。

我很惊讶，你说它在30x30平方米的iPhone 6 Plus上工作。

Answer 2

由于borderRadius样式需要数字作为值，所以不能使用borderRadius：50％。为了让圈中的所有你需要做的就是用你的图像宽度/高度，并与2在这里阅读更多devide它： https://github.com/refinery29/react-native-cheat-sheet

Answer 3

你的边界半径应的宽度和身高的一半。如下所示：

circle: { 
    width: 44, 
    height: 44, 
    borderRadius: 44/2 
}