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.jsimport React from 'react'import {Text} from 'react-native'export default class MyText extends React.Component {
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) { 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 (
)
}
}
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开发中,字体大小不随系统字体大小变化而变化的问题。
我们总结一下:react-native中使用Text和TextInput负责显示文字信息
Text和TextInput中设置allowFontScaling=false可以让字体大小不随系统设置而变化
可以通过单个组件设置、自定义组件、重写render()、设置defaultProps默认值这四种方式来设置allowFontScaling的值为false
对于重写render()、设置defaultProps默认值这两种方式,需要把设置代码放在app组件初始化之前。
确保react-navigation兼容
作者:Quenice
链接:https://www.jianshu.com/p/d2f9ce14127a
native字体尺寸自适应 react_ReactNative字体大小不随系统字体大小变化而变化相关推荐
- native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配
import { Platform, Dimensions, PixelRatio } from 'react-native'; // iPhoneX const X_WIDTH = 375; con ...
- ReactNative字体大小不随系统字体大小变化而变化
引言 在开发react-nativeApp时,相信大家都应该遇到过这样的问题:用户设置了系统的字体大小之后,导致自己的APP布局紊乱,甚至有些内容会被切掉/隐藏,这对于用户来讲,是非常不好的用户体验. ...
- 默认标题栏字体_不喜欢Windows10上的默认系统字体,可以这样更改
在Windows 10上,用户可以更改默认系统字体,但是要执行此任务,现在需要修改注册表. 在以前的版本中,例如在Windows 7上,可以访问个性化设置来更改各种桌面元素的系统字体,包括文件资源管理 ...
- native字体尺寸自适应 react_react native 字体不随系统字体变化而变
最近遇到了一个问题,rn写的软件内的字体(text组件)会随着手机系统字体大小的变化而变,也就是说当你把手机系统的显示-字体调到最大号,打开软件,text的字体会变得非常大,布局就乱了. 下面就这个问 ...
- app字体大小会随着系统字体大小变化
在app的开发过程中可能很多人都会遇到这样的一个问题,当你把手机系统的字体大小改变之后再次进入我们的app时候,app的界面简直是惨不忍睹,进过网上查询资料,发现出现在介绍时候我们必须把px dp s ...
- 设置应用内字体大小不跟随系统字体大小
在项目开发者有用户反馈部分界面 字体重叠严重或者显示不全.开始也是觉得是屏幕适配不完善的问题. 但是测试发现并没有什么问题. 之后就考虑到是否用户设置了系统字体大小,导致字体显示异常尤其是布局宽高固定 ...
- native字体尺寸自适应 react_ios-React Native自适应字体大小
ios-React Native自适应字体大小 我想问一下如何处理本机句柄或做响应字体. 例如,在iPhone 4s中,我的fontSize:14,而在iPhone 6中,我的fontSize:18. ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- android webview 字体 系统字体大小,Android 系统字体大小动态改变,导致webview中显示不兼容的问题解决...
唠叨几句: 在移动端再开发的过程中,很容易使用到webview,它也是用来混合开发的中间桥梁,因此解决webview使用过程中出现的问题是非常有必要的: 问题现象与发现: 现象: 日前,在是使用web ...
最新文章
- webpack - vue Component 从入门到放弃(三)
- MM模块常用T-code
- Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了
- ABP vNext微服务架构详细教程——分布式权限框架(上)
- Math、Date内置对象方法整理
- mysql otter 数据同步_MySQL数据同步之otter
- 修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样?
- *[topcoder]IncrementingSequence
- 数据挖掘-数据清理-缺失值
- Xamarin 设置可接受的版本
- 二分查找的变体 —— Fibnaccian Search
- win乌班图双系统安装(win11、Ubuntu20.04)及安装后的环境、软件配置
- java gd库_PHP GD库是什么
- Android 设计素材积累(九层之台起于垒土)
- 牛顿吼 苹果把老子头砸了 于是 爱翁发现 谭
- CF1312E Array Shrinking(区间dp模板)
- mysql区间左开右闭_左开右闭区间怎么写
- 读吴军博士新浪微博(2012.09-2014.12)信息整理
- 2015年3月31日通过VMware VCP 认证
- cartographer CSM理解
热门文章
- vegas pro 15解决导入的视频和音频有噪声问题,亲测可行
- jpa遇到的 org.hibernate.PersistentObjectException: detached entity passed to persist异常
- [字符编码]Invalid byte 1 of 1-byte UTF-8 sequence终极解决方案
- ubuntu系统下用kazam软件录制的视频不能在windows系统下播放的解决方案
- 如何删除UITableView中的空单元格? [重复]
- 什么时候应该在内部联接上使用交叉应用?
- 撩课-Web大前端每天5道面试题-Day38
- 2019年微服务实践第一课,网易谐云蘑菇街奥思技术大咖深度分享
- PHP设计模式-单例模式
- asp.net core中IHttpContextAccessor和HttpContextAccessor的妙用