Tworzenie kręgów programu css w trybie reakcji natywnej

Question

Mam problemy z tworzeniem kręgów Css w trybie reagowania natywnego. Poniższe działa na iPhone 6 Plus, ale we wszystkich innych iPhone'ach stają się diamentami.

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

Teraz, jeśli mogę użyć PixelRatio na borderRadius działa we wszystkim, ale iPhone 6 Plus. iPhone 6 plus renderuje go jako pudełka z zaokrąglonymi narożnikami.

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

Answer 1

borderRadius powinien być o połowę mniejszy od kwadratu. A więc 15 w twoim przypadku - bez względu na stosunek pikseli urządzenia.

Działa z 30/PixelRatio.get() tylko dla 2x urządzeń siatkówki, powodując wynik 15. Następnie dla iPhone 6 Plus, rzeczywiście dostajesz zaokrąglone pudełko, ponieważ wynik wynosi 10 (stosunek pikseli wynosi 3).

Jestem zaskoczony, mówiąc, że działa na iPhone 6 Plus z 30 na 30x30 kwadratowych.

Answer 2

Ponieważ styl borderrashus oczekuje liczby jako wartości, której nie można użyć borderRadius: 50%. Aby zrobić kółko, musisz tylko użyć szerokości/wysokości obrazu i podzielić go na 2. Przeczytaj więcej tutaj: https://github.com/refinery29/react-native-cheat-sheet

Answer 3

promień twojej obramowania powinien być równy połowie szerokości i wysokości. jak poniżej:

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