में विभिन्न IOS उपकरणों के लिए फ़ॉन्ट आकार सेट करने का तरीका देशी

Question

में प्रतिक्रिया देशी प्रतिक्रिया मैं एक नमूना डिजाइन, जब मैं विभिन्न IOS उपकरणों यहाँ में यह जाँच मेरी कोड है:

render() { 
     return (
     <View style={styles.container}> 
      <View style={styles.body}> 
      <TouchableHighlight style={styles.facebook} > 
      <View style={styles.row}> 
      <Image style={styles.icon} source={require('image!fb')}/> 
      <Text style={styles.facebookText} >Continue with Facebook</Text> 
      </View> 
      </TouchableHighlight> 
     </View> 
     </View> 
    ) 
    } 
}; 
var styles = StyleSheet.create({ 
    container:{ 
    marginTop: 65, 
    flexDirection:'column', 
    flex:1, 
    backgroundColor:'transparent' 
    }, 
    body:{ 
    flex:.5 
    }, 
    facebook:{ 
    marginTop: 25, 
    height: 50, 
    padding: 10, 
    marginRight: 40, 
    marginLeft: 40, 
    backgroundColor: '#1A8A29', 
    }, 
    row:{ 
    flexDirection:'row', 
    }, 
    facebookText:{ 
    marginLeft: 8, 
    fontSize: 20, 
    color: 'white', 
    alignSelf:'center' 
    }, 
    icon:{ 
    marginTop: 3, 
    marginLeft: 5, 
     width: 25, 
     height: 25 
    } 
}) 

जब मैं में जाँच iphone-6 और 5s फ़ॉन्ट समस्या किसी भी एक आ रहा है मेरी मदद इस समस्या को हल करने के लिए, कैसे प्रतिक्रिया देशी ज्यादा appriciated

Answer 1

केवल एक अवधारणा किसी भी मदद के अलग-अलग IOS उपकरणों के लिए फ़ॉन्ट आकार सेट करने के लिए है, लेकिन मैं था निम्न का प्रयास करें:

const Dimensions = require('Dimensions'); 
const Viewport = Dimensions.get('window'); 

const IPHONE6_WIDTH = 750; // check this, since I'm not sure about iPhone 6 width 

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    getFontSize() { 
    return ({ 
     fontSize: ((Viewport.width * Viewport.scale) === IPHONE6_WIDTH) ? 14 : 16 
    }); 
    } 

    render() { 
    <View> 
     <Text style={[styles.facebookText, this.getFontSize()]}>Continue with Facebook</Text> 
    </View> 
    } 
} 

Answer 2

मैं अपने प्रोजेक्ट के लिए निम्न कोड लिखा है:

फ़ाइल पर: multiResolution.js मेरे पास है:

export function getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){ 
    let devRatio = PixelRatio.get(); 
    let factor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0; 
    let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down 
    // console.log("The factor is: "+factor); 
    if(factor<=1){ 
    return currentFont-float2int(maxFontDifferFactor*0.3); 
    }else if((factor>=1) && (factor<=1.6)){ 
    return currentFont-float2int(maxFontDifferFactor*0.1); 
    }else if((factor>=1.6) && (factor<=2)){ 
    return currentFont; 
    }else if((factor>=2) && (factor<=3)){ 
    return currentFont+float2int(maxFontDifferFactor*0.65); 
    }else if (factor>=3){ 
    return currentFont+float2int(maxFontDifferFactor); 
    } 

} 

function float2int (value) { 
    return value | 0; 
} 

फिर प्रत्येक प्रतिक्रिया देशी घटक पर मुझे क्या करना:

import { PixelRatio } from 'react-native'; 
import {getCorrectFontSizeForScreen} from './multiResolution' 
import Dimensions from 'Dimensions'; 
const {height:h, width:w} = Dimensions.get('window'); // Screen dimensions in current orientation 

और फिर मेरे styles पर मैं करता हूं:

var portraitStyles = StyleSheet.create({ 
    titleText: { 
    fontSize: getCorrectFontSizeForScreen(PixelRatio, w,h,27),//magic takes place here 
    }, 
}); 

यह कस्टम है लेकिन यह मेरे लिए बहुत अच्छा काम करता है।

इसके अलावा

(आपके सवाल का अप्रासंगिक लेकिन मुझे किसी भी यह कहना जा रहा हूँ), मैं तो जैसे चौड़ाई और ऊंचाई screenWidth और screenHeight के लिए प्रासंगिक का उपयोग करें:

aStyleForAnElement:{ //this element will occupy 
    width: w*0.55, //55% of the screen width 
    height:h*0.05 //5% of the screen height 
} 

यह मैं कैसे अलग स्क्रीन आकार का समर्थन है अब तक मेरी परियोजना में।

नया उत्तर:

समय गुजरता के रूप में हम सीखते हैं। उस समय मैंने इस पोस्ट को लिखा था, मेरे पास कस्टम कोड का उपयोग करने के बजाय फ़ॉन्ट आकारों का प्रबंधन करने का कोई अन्य समाधान नहीं था, लेकिन अभी मुझे इनमें से कोई भी करने की ज़रूरत नहीं है:

मैं बस हमारे डिजाइनर को डिजाइन करने के लिए कहता हूं सबसे कम संकल्प 320x480 उपलब्ध है (और मुझे पिक्सेल के बजाए अंक में फ़ॉन्ट आकार दें) और फिर 320x480 के लिए डिजाइन करते समय मैं सिर्फ पिक्सेल के बजाय बिंदुओं का उपयोग करता हूं।

320x480 से ऊपर की सभी स्क्रीनों को प्रतिक्रिया-मूल के साथ स्वचालित रूप से देखभाल की जाएगी, मुझे इसे स्वचालित रूप से प्रबंधित करने के लिए किसी भी फैंसी कोड को लिखना नहीं है।

मेरे घटकों अब बस उस तरह लग रहे:

BUTTON_TEXT: { 
    textAlign: 'center', 
    fontSize: 16, // this is 16 points 
    color: 'white', 
    backgroundColor: 'transparent', 
}, 

Answer 3

एक आवेदन के लिए एक आम शैली बनाएँ। सभी स्टाइल घटकों में इस डिफ़ॉल्ट शैली गुणों का पुन: उपयोग करें।

src/आम/style.js

import { Dimensions } from 'react-native'; 
const { width, height } = Dimensions.get('window'); 

export const ColorPrimary = '#5CFE48'; 
export const SmallPhone =() => { 
    if(width<=320) // Here you could use "react-native-device-info" to get device information. 
    return true 
    else 
    return false 
} 

घटक शैली में आयात आम शैली फ़ाइल।

import { SmallPhone, ColorPrimary } from '../../common/style'; 
... 
... 
const styles = StyleSheet.create({ 
    headerLabel: { 
    fontSize: SmallPhone() ? 14:26, 
    color: ColorPrimary 
    } 
}); 

तुम भी सीधे आम style.js में प्रत्येक डिवाइस के लिए विशिष्ट फ़ॉन्ट आकार आवंटित कर सकते हैं और बस त्रिगुट ऑपरेटर्स का उपयोग करने के बजाय SmallPhone फ़ंक्शन को कॉल करें।