आईफोन 6 एस प्लस

Question

पर फ़ॉन्ट आकार जब मैं एक्सकोड/सिम्युलेटर में और अपने पुराने आईओएस/प्रतिक्रियात्मक मूल ऐप का परीक्षण कर रहा हूं, तो पुराने ऐप डिवाइस पर ऐप अच्छा दिखता है, आकार ठीक है। लेकिन एक नए आईफोन 6 एस प्लस डिवाइस पर सब कुछ बहुत छोटा है, टेक्स्ट, मार्जिन, पैडिंग्स की तुलना में दो गुना कम होना चाहिए। क्या यह प्रतिक्रिया समस्या है? क्या मुझे लगता है कि PixelRatio एपीआई का उपयोग करना है और यह सब कुछ हल करेगा? एंड्रॉइड पर मेरे ऐप को पोर्ट करने के बाद भी यह ठीक से काम करेगा?

var myStyle = { 
    Post: { 
    width: PixelRatio.getPixelSizeForLayoutSize(200), 
    margin: PixelRatio.getPixelSizeForLayoutSize(100), 
    } 
} 

के बजाय सिर्फ:

var myStyle = { 
    Post: { 
    width: 200, 
    margin: 100, 
    } 
} 

और यह अब इसका मतलब यह है मेरी शैली के सभी मैं की तरह लिखने के लिए की आवश्यकता होगी?

Answer 1

संक्षिप्त उत्तर हाँ है, आपको अपने सभी फ़ॉन्ट्स के लिए प्रतिक्रिया में कारक होना होगा। मैंने उपयोग की कुछ विधियां हैं।

जैसा कि आपने बताया है, आप getPixelSizeForLayoutSize का उपयोग कर सकते हैं। getPixelSizeForLayoutSize मूल रूप से इस तरह दिखता है हुड के नीचे:

static getPixelSizeForLayoutSize(layoutSize: number): number { 
    return Math.round(layoutSize * PixelRatio.get()); 
} 

उस के साथ समस्या यह है कि PixelRatio.get निम्न मान वापस आ जाएगी है:

* PixelRatio.get() === 1 
    *  - mdpi Android devices (160 dpi) 
    * - PixelRatio.get() === 1.5 
    *  - hdpi Android devices (240 dpi) 
    * - PixelRatio.get() === 2 
    *  - iPhone 4, 4S 
    *  - iPhone 5, 5c, 5s 
    *  - iPhone 6 
    *  - xhdpi Android devices (320 dpi) 
    * - PixelRatio.get() === 3 
    *  - iPhone 6 plus 
    *  - xxhdpi Android devices (480 dpi) 
    * - PixelRatio.get() === 3.5 
    *  - Nexus 6 

मूल रूप से इसका मतलब है कि यह संख्या में पारित वापस आ जाएगी * एक आईफोन 6 पर, और एक आईफोन 6 प्लस पर * 3, जो आमतौर पर बिल्कुल सही नहीं होता है क्योंकि आईफोन 6 प्लस फ़ॉन्ट का आकार बहुत बड़ा होता है। आईफोन 6 और आईफोन 4 को भी वही उपचार मिलेगा, जो इष्टतम नहीं है।

हमने इसे ठीक करने के लिए क्या किया है यह एक सहायक कार्य लिखता है जो डिवाइस की ऊंचाई की गणना करता है और आकार देता है।

इस सटीक कार्यान्वयन वास्तव में आप क्या चाहते हैं नहीं हो सकता है, निम्नलिखित के कुछ बदलाव शायद यह आपके लिए को हल किया जा के रूप में यह हमारे लिए है:

var React = require('react-native') 
var { 
    Dimensions 
} = React 

var deviceHeight = Dimensions.get('window').height; 

export default (size) => { 
    if(deviceHeight === 568) { 
     return size 
    } else if(deviceHeight === 667) { 
     return size * 1.2 
    } else if(deviceHeight === 736) { 
     return size * 1.4 
    } 
    return size 
} 

तो इस तरह इसका इस्तेमाल:

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1) 

getPizelRatioForLayoutSize के मूल कार्यान्वयन के करीब आधारित एक और तरीका है। समस्या सिर्फ तुम अब भी हो रही है iPhone6 ​​और iPhone4 मान एक ही लौट आए है, इसलिए यह एक छोटे से कम सटीक है, लेकिन देशी getPizelRatioForLayoutSize की तुलना में बेहतर काम करता है:

var React = require('react-native') 
var { 
    PixelRatio 
} = React 

var pixelRatio = PixelRatio.get() 

export default (size) => { 
    if(pixelRatio == 2) { 
     return size 
    } 
    return size * 1.15 
} 

तो इस तरह इसका इस्तेमाल:

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1)