Creazione di cerchi css in nativa reattiva

Question

Ho difficoltà a creare cerchi css in native reattivi. I seguenti lavori in iPhone 6 Plus, ma in tutti gli altri iPhone, diventano diamanti.

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

Ora, se io uso PixelRatio su borderRadius funziona in tutto ma iPhone 6 Plus. iPhone 6 plus lo rende come scatole con angoli arrotondati.

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

Answer 1

borderRadius dovrebbe essere metà del lato del quadrato. Quindi 15 nel tuo caso - indipendentemente dal rapporto dei pixel del dispositivo.

Funziona con 30/PixelRatio.get() solo per dispositivi retina 2x, il risultato è 15. Quindi per iPhone 6 Plus, si ottiene effettivamente una casella arrotondata perché il risultato è 10 (il rapporto pixel è 3).

Sono sorpreso che abbia detto che ha funzionato su iPhone 6 Plus con 30 per 30x30 quadrati.

Answer 2

Poiché lo stile borderRadius prevede il numero come valore non è possibile utilizzare borderRadius: 50%. Per fare il cerchio tutto ciò che devi fare è usare la larghezza/altezza dell'immagine e dividerlo con 2. Leggi di più qui: https://github.com/refinery29/react-native-cheat-sheet

Answer 3

il raggio del tuo bordo dovrebbe essere la metà della larghezza e la tua altezza. come sotto:

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