引言
在开发react-native
App时,相信大家都应该遇到过这样的问题:用户设置了系统的字体大小之后,导致自己的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
首先我们来看各种组件的源码.
...
getDefaultProps(): Object {
return {
allowFontScaling: true,
underlineColorAndroid: 'transparent',
};
},
...
...
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
开发中,字体大小不随系统字体大小变化而变化的问题。
我们总结一下:
-
react-native
中使用Text
和TextInput
负责显示文字信息 -
Text
和TextInput
中设置allowFontScaling=false
可以让字体大小不随系统设置而变化 - 可以通过单个组件设置、自定义组件、重写
render()
、设置defaultProps
默认值这四种方式来设置allowFontScaling
的值为false
- 对于重写
render()
、设置defaultProps
默认值这两种方式,需要把设置代码放在app组件初始化之前。 - 确保
react-navigation
兼容