Tạo vòng tròn css trong phản ứng có nguồn gốc

Question

Tôi đang gặp một số sự cố khi tạo vòng kết nối css theo phản ứng gốc. Các công trình sau đây trong iPhone 6 Plus nhưng trong tất cả các iPhone khác, chúng trở thành kim cương.

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

Bây giờ nếu tôi sử dụng PixelRatio trên borderRadius nó hoạt động trong tất cả mọi thứ nhưng iPhone 6 cộng. iPhone 6 plus làm cho nó như hộp với các góc tròn.

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

Answer 1

borderRadius nên được một nửa mặt bên của hình vuông. Vì vậy, 15 trong trường hợp của bạn - không có vấn đề gì tỷ lệ pixel thiết bị có.

Chỉ hoạt động với 30/PixelRatio.get() chỉ dành cho thiết bị Retina 2x, kết quả là 15. Sau đó đối với iPhone 6 Plus, bạn thực sự nhận được một hộp tròn vì kết quả là 10 (tỷ lệ pixel là 3).

Tôi ngạc nhiên khi bạn nói rằng nó hoạt động trên iPhone 6 Plus với 30 cho hình vuông 30x30.

Answer 2

Vì kiểu borderRadius mong đợi số dưới dạng giá trị bạn không thể sử dụng borderRadius: 50%. Để tạo vòng kết nối, tất cả những gì bạn phải làm là sử dụng chiều rộng/chiều cao của hình ảnh và đặt nó với 2. Đọc thêm tại đây: https://github.com/refinery29/react-native-cheat-sheet

Answer 3

bán kính đường viền của bạn phải bằng một nửa chiều rộng và chiều cao của bạn. như bên dưới:

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