React Native是否会将fontSize原值传递给原生OS组件?
React Native 中 fontSize 属性的传递规则
React Native 不会将代码中填写的fontSize属性值未经任何转换直接传递给原生OS控件,框架内部存在固定的单位转换逻辑,这是设计稿与实现效果存在字号差异的常见诱因,具体规则如下:
- 基础单位映射逻辑
RN 中所有无单位的尺寸值(含fontSize)默认以逻辑独立像素为基准:- iOS 端:传入的
fontSize数值会直接映射为iOS排版使用的pt(点)单位,传入原生UIFont初始化方法时无额外数值转换,但会受系统字体缩放设置影响 - Android 端:传入的
fontSize数值默认映射为Android排版使用的sp(缩放像素)单位,本身就会跟随系统字体大小设置自动缩放,和你代码中写的原始值存在比例差
- iOS 端:传入的
- 常见导致字号和设计稿不符的框架层原因
allowFontScaling属性默认开启:所有Text组件默认允许字号跟随系统字体缩放比例调整,即便是写死的固定fontSize值,最终渲染到原生的数值也会乘以系统返回的字体缩放系数- 适配逻辑误用:如果你的项目里用屏幕宽高比、
PixelRatio.get()像素比对字号做了等比缩放,会直接偏离Figma标注的字号值——Figma设计稿的字号标注默认对应逻辑像素单位,不需要额外乘适配系数
- 快速验证方法
可以先给测试文本组件加上allowFontScaling={false}属性,同时调用PixelRatio.getFontScale()打印当前系统的字体缩放值,先排除框架自动缩放的影响;如果关闭缩放后字号仍有偏差,再排查自定义字体本身的字重、字形、行高配置和Figma设计的差异。
内容的提问来源于stack exchange,提问作者tibbe
相关产品推荐
相关产品推荐

