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组来形成试验和错误的列表！

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

谢谢！

Answer 1

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