美文网首页React Native学习
react native 字体随系统字体变化而变

react native 字体随系统字体变化而变

作者: JackfengGG | 来源:发表于2017-07-04 09:01 被阅读382次

    react native 字体不随系统字体变化而变---liu_520
    rn写的软件内的字体(text组件)会随着手机系统字体大小的变化而变。
    1、android 的解决方案是:

    const fontSizeScaler = PixelRatio.get()/PixelRatio.getFontScale()
    
    fontSize:18*fontSizeScaler
    

    其中用到了PixelRatio的两个方法,
    get() 返回设备的像素密度,
    getFontScale()返回字体大小缩放比例. 这个比例可以用于计算绝对的字体大小, 所以很多深度依赖字体大小的组件需要用此函数的结果进行计算.
    如果没有设置字体大小, 它会直接返回设备的像素密度.
    目前这个函数仅仅在Android设备上实现了, 它会体现用户选项里的 "设置 > 显示 > 字体大小". 在iOS设备上它会直接返回默认的像素密度.
    感兴趣的同学可以打印测试下:

    字体随着系统字体变化

    由此我们可以看出,系统的字体越大,PixelRatio.getFontScale()字体的缩放比越大,反之越小,fontSizeScaler的值就越小和系统字体成反比,才能在系统字体变大的情况下,软件的字体相对变小,总体大小保持不变
    2、ios 的解决方案是:
    ios 上返回的默认就是像素密度,所以不起作用,需要用到text的一个属性,这个属性只对ios生效:

    allowFontScaling={false}
    

    这样的话,软件中的字体就不会随着系统字体的变化而变了,但是不管在大屏7plus还是小屏5s,字体的大小都是一样的,这样在小屏幕手机上布局又会变化。
    这样的话我们要针对小屏幕的手机再次优化,判断像素比。

    if (pixelRatio === 2) {
        // iphone 5s and older Androids
        if (deviceWidth < 360) {
            return size * 0.95;
        }
        // iphone 5
        if (deviceHeight < 667) {
            return size;
        // iphone 6-6s
        } else if (deviceHeight >= 667 && deviceHeight <= 735) {
            return size * 1.15;
        }
        // older phablets
        return size * 1.25;
     }
    if (pixelRatio === 3) {
        // catch larger devices
        // ie iphone 6s plus / 7 plus / mi note 等等
        return size * 1.27;
    }
    

    里面的比值大家根据自己的实际情况自行调整,

    相关文章

      网友评论

        本文标题:react native 字体随系统字体变化而变

        本文链接:https://www.haomeiwen.com/subject/ftethxtx.html