React Native Expo下如何不关闭字体缩放实现TextInput大字体无障碍适配

以下是比透明Text测量方案更高效稳定的实现方式：

• 利用系统自带的字体缩放系数动态计算尺寸
  你提到的AccessibilityInfo无法获取字号相关信息是旧版本的认知偏差，从React Native 0.58及对应兼容的Expo版本开始，AccessibilityInfo.getFontScale()方法可直接返回当前系统的字体缩放比例，默认值为1，字体放大到150%时返回1.5，同时支持监听fontScaleChanged事件实时响应系统字体大小调整。
  类Web的em单位效果可以通过以下逻辑实现：
  1. 预先定义基础字号对应的单字符宽度常量（比如16号字下，半角数字/英文单字符宽度约为8px，中文单字符宽度约为16px）
  2. 目标宽度 = 单字符基础宽度 * 需要容纳的字符数量 * 当前字体缩放系数
     示例代码：

  import { useState, useEffect } from 'react';
  import { AccessibilityInfo, TextInput, View } from 'react-native';
  
  const TimeInput = () => {
    const [fontScale, setFontScale] = useState(1);
  
    useEffect(() => {
      // 初始化获取字体缩放比例
      AccessibilityInfo.getFontScale().then(scale => setFontScale(scale));
      // 监听系统字体大小变化
      const subscription = AccessibilityInfo.addEventListener(
        'fontScaleChanged',
        setFontScale
      );
      return () => subscription.remove();
    }, []);
  
    // 适配可容纳5个半角字符的输入框宽度
    const inputWidth = 8 * 5 * fontScale;
  
    return (
      <View style={{ width: inputWidth }}>
        <TextInput style={{ fontSize: 16 }} />
      </View>
    );
  };
  

• 固定输入框尺寸，单独控制文本缩放
  如果你的需求是输入框组件尺寸不变，仅内部文本跟随系统缩放，直接给TextInput设置allowFontScaling={true}，外部容器设置固定宽度即可，无需额外计算逻辑，底部导航栏本身默认不跟随字体缩放，不会和输入框适配产生冲突。
• 直接使用成熟的响应式适配库
  如果你不想自行处理底层计算逻辑，可以直接使用社区通用的响应式适配库，这类库已经封装了字体缩放、Dynamic Type适配的完整逻辑，直接提供类em/rem的单位调用方法，完全兼容Expo环境。

内容的提问来源于stack exchange，提问作者Archimedes Trajano