React-Native：如何缩放字体大小以支持Android和iOS中的多种不同分辨率和屏幕？

我在尝试在存在的许多不同屏幕上确定正确的字体大小时遇到了很大的麻烦。React-Native：如何缩放字体大小以支持Android和iOS中的多种不同分辨率和屏幕？

目前我有一个称为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 
}

，然后标准化字体的大小是这样的：

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

它似乎在iOS在Android上很好地工作，但不是很好......我想我需要更多的fontFactor团体组成这个名单与试验和错误！

但我想知道，有没有更好的方法来做到这一点？其他人对此做了什么？

谢谢！

来源

2016-07-12 SudoPlz

React Native的尺寸基于点而不是像素，因此您不应该需要这样复杂的逻辑才能根据设备dpi更改字体大小。相反，如果您想撤消自动应用的缩放比例，则应该将像素比例的像素大小分开。

来源

2016-11-28 15:16:02 Nuthinking

React-Native：如何缩放字体大小以支持Android和iOS中的多种不同分辨率和屏幕？

回答

相关问题