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

Posted 2023-03-15

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

【英文标题】：React-Native: How to scale font size to support many different resolutions and screens in both Android and iOS?

【发布时间】：2016-07-12 09:34:07

【问题描述】：

我很难在现有的许多不同屏幕上确定正确的字体大小。

目前我有一个名为 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 组来通过反复试验来形成这个列表！

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

谢谢！

【参考方案1】：

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