React Native：如何检测字体缩放后的文本组件字号？

刚好知道怎么解决这个问题！你提到的那个API应该是PixelRatio.getFontScale()，它正是用来获取系统当前字体缩放比例的工具，结合你设置的基础字号，就能轻松算出文本实际渲染的大小，而且完全不用牺牲无障碍性~

下面是具体的实现方案：

1. 基础计算：获取当前实际字号 #

首先从React Native引入PixelRatio，然后用它的getFontScale()方法拿到缩放比例，再和你的基础字号相乘：

import { PixelRatio, Text } from 'react-native';

// 计算实际字号
const baseFontSize = 18;
const fontScale = PixelRatio.getFontScale();
const actualFontSize = baseFontSize * fontScale;

// 可以直接在组件里使用或者打印查看
console.log(`基础字号18px，实际渲染字号：${actualFontSize.toFixed(2)}px`);

2. 实时响应系统字体设置变化 #

如果用户调整系统字体大小后，你希望实时更新实际字号的计算结果，推荐使用useWindowDimensions Hook（React Native 0.64+支持），它会自动监听系统字体缩放的变化：

import { useWindowDimensions, Text } from 'react-native';

function MyScaledText() {
  // 实时获取当前字体缩放比例
  const { fontScale } = useWindowDimensions();
  const baseFontSize = 18;
  // 计算实际渲染字号
  const actualFontSize = baseFontSize * fontScale;

  return (
    <>
      <Text style={{ fontSize: baseFontSize }}>My Text</Text>
      <Text>实际渲染字号：{actualFontSize.toFixed(2)}px</Text>
    </>
  );
}

这样用户一调整系统字体，页面就会自动更新实际字号的显示，非常方便。

3. 进阶：限制最大缩放比例（兼顾布局与无障碍） #

要是你担心字体缩放过大导致布局错乱，但又不想完全禁用缩放，可以设置一个最大缩放阈值，比如限制最多放大到1.5倍：

import { useWindowDimensions, Text } from 'react-native';

function RestrictedScaledText() {
  const { fontScale } = useWindowDimensions();
  const baseFontSize = 18;
  const maxAllowedScale = 1.5; // 自定义最大缩放比例

  // 取实际缩放比例和最大阈值的较小值，保证字体不会过大
  const actualFontSize = baseFontSize * Math.min(fontScale, maxAllowedScale);

  return (
    <Text style={{ fontSize: actualFontSize }}>My Text</Text>
  );
}

这种方式既保留了用户调整字体的无障碍权利，又能避免极端缩放破坏页面布局，算是一个很实用的折中方案。

内容的提问来源于stack exchange，提问作者0xori