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中用来显示文字时，一般会用到 Text 和 TextInput 这两个组件，所以，我们只要针对这两个组件做好工作，那就基本上解决了字体大小适配的问题。

Text 和 TextInput 它们有一个共同属性：allowFontScaling，这个属性在官方文档中解释如下：

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
l------------------------------------
即：是否随系统指定的文字大小变化而变化。默认值为true

这给我提供了解决方案，只要我们给 Text 和 TextInput 的属性 allowFontScaling 设置值为false，那么文字大小就不会随系统字体大小的变化而变化。

1、设置allowFontScaling

我们有几种方式来设置 Text 和 TextInput 的 allowFontScaling 。

1.1、给 Text 和 TextInput 组件设置 allowFontScaling = false

这种方案效率很低，需要在每个使用到这两个组件的地方都加上这个属性，但是一般这两个组件的使用率还是很高的，所以这是一个庞大的工作量，而且在开发过程当中，我们也很容易忘记设置它。

那么有没有更好实现方式呢？当然有：

1.2、自定义 MyText/MyTextInput 组件

我们可以自定义一个组件MyText, 然后统一设置 allowFontScaling = false 属性，然后在其他需要调用的时候，直接用 MyText 代替 Text 。

MyText.js

import React from 'react'
import {Text} from 'react-native'

export default class MyText extends React.Component {

    render() {
        return (
            
               {this.props.children}
            
        )
    }
}

这个方案好一些了，但是，你仍然可能在某段代码里，忘记使用 MyText 而是直接使用 Text，这个时候，问题依然会出现。

那么，就没有一种万无一失的方案吗？当然有啦：

1.3、重写 Text 的 render()

是的，我们可以重写 Text 的 render() 方法，让 Text 在渲染的时候，设置 allowFontScaling = false。这里，我们需要用到 lodash 的 wrap() 方法：

0.56(不包括)版本之前

Text.prototype.render = _.wrap(Text.prototype.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

而在0.56版本，Text 改为了es6 中 extends 的实现方式来创建类，所以，需要如下方式来重写 render：

0.56(包括)版本之后

Text.render = _.wrap(Text.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

注意：
这段代码最好放在你 App 整个组件执行调用之前，比如在我的项目中，我放的位置如下

import React from 'react'
import {AppRegistry, Text, DeviceEventEmitter, YellowBox} from 'react-native'
import {Provider} from 'react-redux'
import App from './src/App'
import _ from 'lodash'

//字体不随系统字体变化
Text.render = _.wrap(Text.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

...

class MyApp extends React.Component {
    render() {
        return (
            
                
            
        )
    }
}

AppRegistry.registerComponent("xxx", () => MyApp);

但是，很遗憾，这个只适用于 Text，TextInput 不能用此方案。

那么，有没有一种方案，能够同时兼容 Text 和 TextInput 并且做到一劳永逸呢？当然有了，终极方案：

1.4、完美方案：修改 defaultProps

首先我们来看各种组件的源码.

TextInput.js

 getDefaultProps(): Object {
    return {
      allowFontScaling: true,
      underlineColorAndroid: 'transparent',
    };
  }

Text.js

 static defaultProps = {
    accessible: true,
    allowFontScaling: true,
    ellipsizeMode: 'tail',
  }

通过这两个代码片段可以知道，在定义 Text 和 TextInput 时，都有给组件设置默认属性的操作，所以我们可以：

TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {allowFontScaling: false})
Text.defaultProps = Object.assign({}, Text.defaultProps, {allowFontScaling: false})

来设置 Text 和 TextInput 的 allowFontScaling 属性默认值为 false，真正实现了一劳永逸。

确保 react-navigation 兼容

通过设置 defaultProps 的方式来修改 allowFontScaling 的值为 false，会有一个小问题。

大家在使用 react-native 时，最常用到的 navigator 应该是 react-navigation。你需要单独设置 headertitleallowfontscaling 和 allowFontScaling 来确保 react-navigation 的 tabTitle 和 headerTitle 没有问题。

结语

好了，到此，我们就完美解决了 react-native 开发中，字体大小不随系统字体大小变化而变化的问题。

我们总结一下：

react-native 中使用 Text 和 TextInput 负责显示文字信息；
Text 和 TextInput 中设置 allowFontScaling=false 可以让字体大小不随系统设置而变化；
可以通过动态计算、单个组件设置、自定义组件、重写 render()、设置 defaultProps 默认值这些方式来应对；
对于重写 render()、设置 defaultProps 默认值这两种方式，需要把设置代码放在 App 组件初始化之前；
留意确保 react-navigation 兼容；

---

节选自https://www.jianshu.com/p/d2f9ce14127a，有增删和修改。