ReactNative字体大小不随系统字体大小变化而变化

引言

在开发react-nativeApp时，相信你们都应该遇到过这样的问题：用户设置了系统的字体大小以后，致使本身的APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来说，是很是很差的用户体验。

那为何会出现这种状况呢呢？缘由是咱们在开发的时候，布局的前提是系统的字体大小设置为默认大小，因此只能保证在系统字体大小正常的状况下，咱们的布局是友好的，

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

Text和TextInput

在react-native中用来显示文字的，通常会用到两个组件：Text和TextInput。因此，咱们只要针对这两个组件作好工做，那就基本上解决了字体大小适配的问题

Text和TextInput它们有一个共同属性：

allowFontScaling

这个属性在react-native官方文档中解释以下：

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

意思是：

是否随系统指定的文字大小变化而变化。默认值为true

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

设置allowFontScaling

咱们有几种方式来设置Text和TextInput的allowFontScaling。第一种：

1. 给Text和TextInput组件设置allowFontScaling = false

<Text allowFontScaling={false}/>
<TextInput allowFontScaling={false}/> 
复制代码

这种方案效率很低，须要在每一个使用到这两个组件的地方都加上这个属性。可是通常这两个组件的使用率仍是很高的，因此这是一个庞大的工做量，并且在开发过程中，咱们也很容易忘记设置它

那么有没有更好实现方式呢？固然有，这就是下面讲的第二种：

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 (
            <Text
                allowFontScaling={false}
                {...this.props}>
                {this.props.children}
            </Text>
        )
    }
}
复制代码

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

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

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})
})
复制代码

注意1： 在react-native版本0.56以前，Text是经过React的createReactClass方式来建立类的，也就是说，是经过javascript的prototype的方式来建立类。因此重写render方法时，须要经过Text.prototype.render来引用

而在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})
})
复制代码

你们能够查看源码，或者查看0.56的change-log

注意2： 这段代码最好放在你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 (
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
}

AppRegistry.registerComponent("xxx", () => MyApp);
复制代码

注意3： 可是很遗憾的是，这个只适用于Text，TextInput不能用于此方案。

那么，有没有一种方案，可以同时兼容Text和TextInput而且作到一劳永逸呢？固然有了，终极方案：

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, {defaultProps: 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开发中，字体大小不随系统字体大小变化而变化 的问题。

咱们总结一下：

1. react-native中使用Text和TextInput负责显示文字信息
2. Text和TextInput中设置allowFontScaling=false可让字体大小不随系统设置而变化
3. 能够经过单个组件设置、自定义组件、重写render()、设置defaultProps默认值这四种方式来设置allowFontScaling的值为false
4. 对于重写render()、设置defaultProps默认值这两种方式，须要把设置代码放在app组件初始化以前。
5. 确保react-navigation兼容