当前位置 : 主页 > 网页制作 > React >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我试图在现有的许多不同屏幕上找到正确的字体大小,我遇到了很大的麻烦. 目前我有一个名为getCorrectFontSizeForScreen的辅助函数. export function getCorrectFontSizeForScreen(currentFontSize){ const maxFo
我试图在现有的许多不同屏幕上找到正确的字体大小,我遇到了很大的麻烦.

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

但我想知道,有更好的方法吗?
其他人对此有何看法?

谢谢!

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