900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > native字体尺寸自适应 react_ReactNative字体大小不随系统字体大小变化而变化

native字体尺寸自适应 react_ReactNative字体大小不随系统字体大小变化而变化

时间:2024-05-13 05:52:05

相关推荐

native字体尺寸自适应 react_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

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

那么有没有更好实现方式呢?当然有,这就是下面讲的第二种:

2. 自定义MyText/MyTextInput组件

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

MyText.jsimportReactfrom'react'import{Text}from'react-native'ponent{

render(){return(

allowFontScaling={false}

{...this.props}>

{this.props.children}

)

}

}

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

那么,就没有一种万无一失的方案吗?当然有啦,第三种:

3. 重写Text的render()

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

0.56(不包括)版本之前Text.prototype.render=_.wrap(Text.prototype.render,function(func,...args){letoriginText=func.apply(this,args)returnReact.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){letoriginText=func.apply(this,args)returnReact.cloneElement(originText,{allowFontScaling:false})

})

大家可以查看源码,或者查看0.56的change-log

注意2:

这段代码最好放在你app整个组件执行调用之前,比如在我的项目中,我放的位置:importReactfrom'react'import{AppRegistry,Text,DeviceEventEmitter,YellowBox}from'react-native'import{Provider}from'react-redux'importAppfrom'./src/App'import_from'lodash'//字体不随系统字体变化Text.render=_.wrap(Text.render,function(func,...args){letoriginText=func.apply(this,args)returnReact.cloneElement(originText,{allowFontScaling:false})

})

...

...

ponent{

render(){return(

)

}

}

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

注意3:

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

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

4. 完美方案:修改defaultProps

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

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

};

},

......staticdefaultProps={

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

我们总结一下:react-native中使用Text和TextInput负责显示文字信息

Text和TextInput中设置allowFontScaling=false可以让字体大小不随系统设置而变化

可以通过单个组件设置、自定义组件、重写render()、设置defaultProps默认值这四种方式来设置allowFontScaling的值为false

对于重写render()、设置defaultProps默认值这两种方式,需要把设置代码放在app组件初始化之前。

确保react-navigation兼容

作者:Quenice

链接:/p/d2f9ce14127a

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。