React Native 字体相关问题

2022-09-20

React Native 应用不随系统字体变化而变化的需求应该大家在开发应用的时候都会遇到,如果应用字体随系统字体大小变化而变化,那么就会导致布局问题(比如:文本遮掩、文本截断)。下面将简单介绍一下如何解决这个问题。

设置全局 allowFontScaling

在 React Native 中,一般使用 TextTextInput 展示文本内容,他们都具有这个属性 allowFontScaling,这个属性的作用是允许应用字体随系统字体变化而变化,默认是 true

在这里,我们直接使用 Monkey Patch,对 TextTextInput 进行重写,这样在现有应用中,就不用再做全局替换之类的做法。

javascript

机型文本截断问题

到这还没完,在一些 Android 机型上(小米、华为等等)提供了设置系统字体样式功能,这种功能会导致字体会被截断。解决方法也很简单,强制设置默认字体。

javascript

总结

本文主要介绍 React Native 字体相关问题,并提供相关解决方案,希望能够帮助到你。