React Native 字体大小不随系统字体大小变化

引言

在开发react-native App时，相信大家都遇到过这样的问题：用户设置了系统的字体大小之后，导致自己的 App 布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的使用体验。

为什么会出现这种情况呢？其实，我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的。

那么，我们应该如何解决这个问题呢？今天这篇文章，就给大家介绍几种解决方案。

一、动态计算

建一个工具类，加上下面的设置字体大小方法。

setSpText = (size)  =>{
    let scaleWidth = SCREEN_WIDTH / 750;  //750是设计稿中的宽度，可根据自己的实际情况调整
    let scaleHeight = SCREEN_HEIGHT / 1334; //1334是设计稿中的高度，可根据自己的实际情况调整
    const pixelRatio = PixelRatio.get();
    const fontScale = PixelRatio.getFontScale();
    let scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
    return size / PixelRatio.get();
}

遇到需要设置字体大小的情况就用该方法代替原来的直接设数值，大概是这种画风：

fontSize: Utils.setSpText(20),

实测发现，这种方案在iOS系统上表现还可以，在Android机上效果却不那么完美，在部分手机上仍然会随系统字体大小而变化。

另外，如果是新开项目还好，如果是已有的旧工程，改动量还是挺多的，比较麻烦，我们需要更好的方式，我们来刨根问底吧。

二、Text和TextInput

在react-native中