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

最近遇到了一个问题，rn写的软件内的字体（text组件）会随着手机系统字体大小的变化而变，也就是说当你把手机系统的显示-字体调到最大号，打开软件，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;

}

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

这样就能根据大小屏幕的手机进行适配了，

这里感谢好朋友（下一刻。）QQ：303152878的帮助