2016-07-12 48 views
5

Ho grossi problemi nel cercare di capire la dimensione corretta dei caratteri sui molti schermi diversi che esistono.React-Native: come ridimensionare le dimensioni del carattere per supportare diverse risoluzioni e schermate sia in Android che in iOS?

Attualmente ho una funzione di supporto chiamata getCorrectFontSizeForScreen.

export function getCorrectFontSizeForScreen(currentFontSize){ 

    const maxFontDifferFactor = 6; //the maximum pixels of font size we can go up or 

    if(Platform.OS === 'ios'){ //iOS part 
    let devRatio = PixelRatio.get(); 
    this.fontFactor = (((screenWidth*devRatio)/320)*0.55+((screenHeight*devRatio)/640)*0.45) 
    if(this.fontFactor<=1){ 
     return currentFontSize-float2int(maxFontDifferFactor*0.3); 
    }else if((this.fontFactor>=1) && (this.fontFactor<=1.6)){ 
     return currentFontSize-float2int(maxFontDifferFactor*0.1); 
    }else if((this.fontFactor>=1.6) && (this.fontFactor<=2)){ 
     return currentFontSize; 
    }else if((this.fontFactor>=2) && (this.fontFactor<=3)){ 
     return currentFontSize+float2int(maxFontDifferFactor*0.85); 
    }else if (this.fontFactor>=3){ 
     return currentFontSize+float2int(maxFontDifferFactor); 
    } 
    }else{ //Android part 

    let scale = screenWidth/375; //got this from the f8 facebook project 

    this.fontFactor = (((screenWidth)/320)*0.65+((screenHeight)/640)*0.35) 

    if(this.fontFactor<=1){ //for 0.8 until 1.0 use 8 (800x600 phone this.fontFactor == 0.961) 
     return float2int(scale * (currentFontSize+8)); 
    }else if((this.fontFactor>=1) && (this.fontFactor<=1.6)){ //for 1.0 until 1.5 use 4 (NEXUS 5 this.fontFactor == 1.055) 
     return float2int(scale * (currentFontSize+4)); 
    } 
    else{ 
     return float2int(scale * (currentFontSize+2)); 
    } 
    } 



function float2int (value) { 
    return value | 0; //Converts a float to an integer 
} 

e quindi normalizzare la dimensione del carattere in questo modo:

const styles = StyleSheet.create({ 
    aText:{ 
    color: 'white', 
    fontFamily: 'Whatever', 
    fontSize: getCorrectFontSizeForScreen(14), 
    } 
}); 

sembra funzionare bene su iOS, ma non così bene su Android ... Credo che ho bisogno più gruppi fontFactor per formare questa lista con prove ed errori !!

Ma mi chiedo, c'è un modo migliore per farlo? Cosa fanno gli altri a riguardo?

Grazie!

risposta

4

Le dimensioni in React Native si basano su punti, non su pixel, quindi non è necessario disporre di una logica così complessa per modificare la dimensione del carattere in base al dpi del dispositivo. Al contrario, se si desidera annullare il ridimensionamento applicato automaticamente, è necessario dividere la dimensione in pixel per il rapporto pixel.