प्रतिक्रिया-मूल

Question

में सीएसएस सर्कल बनाना मुझे प्रतिक्रिया-मूल में सीएसएस सर्कल बनाने में कुछ परेशानी हो रही है। आईफोन 6 प्लस में निम्नलिखित काम करता है लेकिन अन्य सभी आईफोन में, वे हीरे बन जाते हैं।

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

अब अगर मैं borderRadius पर PixelRatio का उपयोग यह सब कुछ लेकिन iPhone 6 प्लस में काम करता है। आईफोन 6 प्लस इसे गोलाकार कोनों के साथ बक्से के रूप में प्रस्तुत करता है।

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

Answer 1

सीमा त्रिज्या वर्ग के आधा भाग होना चाहिए। तो 15 आपके मामले में - कोई फर्क नहीं पड़ता कि डिवाइस में पिक्सेल अनुपात क्या है।

यह 30/PixelRatio.get() के साथ केवल 2x रेटिना उपकरणों के लिए काम करता है, परिणाम 15 है। फिर आईफोन 6 प्लस के लिए, आपको वास्तव में एक गोलाकार बॉक्स मिलता है क्योंकि परिणाम 10 (पिक्सेल अनुपात 3 है)।

मुझे आश्चर्य है कि यह आईफोन 6 प्लस पर 30x30 वर्ग के लिए 30 के साथ काम करता है।

Answer 2

सीमा के बाद से त्रिज्या शैली संख्या को एक मान के रूप में उम्मीद करती है जिसे आप सीमा का उपयोग नहीं कर सकते हैं: 50%। सर्कल बनाने के लिए आपको बस अपनी छवि चौड़ाई/ऊंचाई का उपयोग करना है और इसे 2 से भरोसा करना है। और पढ़ें: https://github.com/refinery29/react-native-cheat-sheet

Answer 3

आपकी सीमा त्रिज्या चौड़ाई और आपकी ऊंचाई का आधा होना चाहिए। नीचे की तरह:

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