Erstellen von CSS-Kreisen in reaktionsnativen

Question

Ich habe Probleme beim Erstellen von CSS-Kreisen in reaktionsnativen. Das Folgende funktioniert in iPhone 6 Plus, aber in allen anderen iPhones werden sie zu Diamanten.

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

Nun, wenn ich PixelRatio auf borderRadius verwenden funktioniert es in allen Dingen aber iPhone 6 Plus. iPhone 6 Plus macht es zu Boxen mit abgerundeten Ecken.

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

Answer 1

borderRadius sollte die Hälfte der Seite des Quadrats sein. Also 15 in deinem Fall - egal welches Pixelverhältnis das Gerät hat.

Es funktioniert mit 30/PixelRatio.get() nur für 2x Retina-Geräte, denn das Ergebnis ist 15. Dann für iPhone 6 Plus erhalten Sie tatsächlich eine runde Box, weil das Ergebnis 10 (Pixelverhältnis ist 3).

Ich bin überrascht zu sagen, es funktioniert auf dem iPhone 6 Plus mit 30 für ein 30x30 Quadrat.

Answer 2

Da der borderRadius-Stil die Zahl als Wert erwartet, können Sie borderRadius nicht verwenden: 50%. Um den Kreis zu erstellen, müssen Sie nur Ihre Bildbreite/-höhe verwenden und mit 2 teilen. Lesen Sie hier mehr: https://github.com/refinery29/react-native-cheat-sheet

Answer 3

Ihr Randradius sollte eine halbe Breite und Ihre Höhe sein. wie unten:

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