React Native 字体不随系统字体变化而变
最近遇到了一个问题,rn写的软件内的字体(text组件)会随着手机系统字体大小的变化而变,也就是说当你把手机系统的显示-字体调到最大号,打开软件,text的字体会变得非常大,布局就乱了。http://blog.csdn.net/liu__520/article/details/54969502
下面就这个问题提供下解决的方案:
1、android 的解决方案是:
const fontSizeScaler = PixelRatio.get()/PixelRatio.getFontScale()
fontSize:18*fontSizeScaler
其中用到了PixelRatio的两个方法,
get() 返回设备的像素密度,
getFontScale()返回字体大小缩放比例. 这个比例可以用于计算绝对的字体大小, 所以很多深度依赖字体大小的组件需要用此函数的结果进行计算.
如果没有设置字体大小, 它会直接返回设备的像素密度.
目前这个函数仅仅在Android设备上实现了, 它会体现用户选项里的 "设置 > 显示 > 字体大小". 在iOS设备上它会直接返回默认的像素密度.
感兴趣的同学可以打印测试下:
![](http://upload-images.jianshu.io/upload_images/3463020-ee26506a71d98611.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
由此我们可以看出,系统的字体越大,PixelRatio.getFontScale()字体的缩放比越大,反之越小,fontSizeScaler的值就越小和系统字体成反比,才能在系统字体变大的情况下,软件的字体相对变小,总体大小保持不变
2、ios 的解决方案是:
ios 上返回的默认就是像素密度,所以不起作用,需要用到text的一个属性,这个属性只对ios生效:
allowFontScaling={false}
这样的话,软件中的字体就不会随着系统字体的变化而变了,但是不管在大屏7plus还是小屏5s,字体的大小都是一样的,这样在小屏幕手机上布局又会变化。
这样的话我们要针对小屏幕的手机再次优化,判断像素比。
if (pixelRatio === 2) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return size * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return size;
// iphone 6-6s
} else if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.15;
}
// older phablets
return size * 1.25;
}
if (pixelRatio === 3) {
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等
return size * 1.27;
}
里面的比值大家根据自己的实际情况自行调整,
这样就能根据大小屏幕的手机进行适配了,
相关文章
- CrossOver2020虚拟机软件(适用于Mac系统)
- Android系统服务之WindowManager整理
- 软件的系统测试
- SaaS电商系统如何为家用电器行业发展注入新动能
- OD提示 "为了执行系统不支持的动作, OllyICE 在这个被调试的程序中注入了一点代码, 但是经过5秒仍未收到响应..." 解决办法
- Linux 系统 杀Oracle 进程
- 【笔记】Vue Element+Node.js开发企业通用管理后台系统——电子书上传功能开发
- 2022-05-01 Unity核心3——2D物理系统
- 信息化系统导航菜单样式实现
- Android 7.0 以上通过系统图库打开图片的方法
- 一则Iris分类器系统介绍(DecisionTree + Flask + React)
- 《Linux From Scratch》第二部分:准备构建 第五章:构建临时文件系统- 5.24. Grep-2.21
- 《Linux From Scratch》第三部分:构建LFS系统 第六章:安装基本的系统软件- 6.58. Kbd-2.0.2
- React Native调用系统的应用:电话、短信、邮件、浏览器等
- React Native调用系统的应用:电话、短信、邮件、浏览器等
- 我的Android进阶之旅------>Android系统设置默认来电铃声、闹钟铃声、通知铃声