在反應本地創建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 
}