React Native应用如何限制跟随system font size放大的最大字号

核心思路是自定义系统字体大小到应用内字号的映射规则，新增上限阈值，所有文本字号统一走适配逻辑即可实现需求。

实现步骤 #

• 第一步：封装字号适配工具函数，内置你需要的映射规则和字号上限

// 定义你要求的系统字号到应用内字号的映射关系
const systemToAppFontMap = {
  1: 10,
  2: 14,
  3: 18
}
// 定义字号上限
const MAX_APP_FONT_SIZE = 18

/**
 * 传入系统字号，返回适配后的应用内字号
 * @param {number} systemFontSize 系统字体大小等级
 * @returns {number} 应用内使用的字号
 */
export const getAdaptedFontSize = (systemFontSize) => {
  return systemToAppFontMap[systemFontSize] || MAX_APP_FONT_SIZE
}

如果你的项目是通过系统字体缩放系数适配，也可以用以下工具函数：

import { PixelRatio } from 'react-native'

const MAX_FONT_SCALE = 1.8 // 对应你示例中的上限18px，对应基准10px的缩放系数为1.8

export const getAdaptedFontSize = (baseFontSize) => {
  const systemFontScale = PixelRatio.getFontScale()
  const finalScale = Math.min(systemFontScale, MAX_FONT_SCALE)
  return Math.round(baseFontSize * finalScale)
}

• 第二步：全局统一使用适配后的字号
  你可以选择两种方式接入，推荐第二种全局封装的方案，接入成本更低：

1. 零散替换：所有用到fontSize的地方，都调用上述工具函数获取最终字号

import { getAdaptedFontSize } from './utils/fontAdapter'

// 示例用法
<Text style={{ fontSize: getAdaptedFontSize(1) }}>测试文本</Text>

2. 全局封装Text组件：重写React Native原生Text组件，统一处理字号适配，后续项目所有文本都使用这个自定义组件即可，无需额外修改业务代码

import React from 'react'
import { Text as RNText } from 'react-native'
import { getAdaptedFontSize } from './utils/fontAdapter'

const Text = ({ style, ...restProps }) => {
  const originFontSize = style?.fontSize || 1
  const finalFontSize = getAdaptedFontSize(originFontSize)
  return <RNText style={[style, { fontSize: finalFontSize }]} {...restProps} />
}

export default Text

注：如果需要完全禁用系统字体缩放，可以在项目入口文件添加以下代码，所有文本将固定为你写死的字号，不会跟随系统变更，一般不推荐该方案：

import { Text } from 'react-native'
Text.defaultProps = Text.defaultProps || {}
Text.defaultProps.allowFontScaling = false

内容的提问来源于stack exchange，提问作者Johnsons e Johnsons