如何在React Native中修改应用内所有Text组件的字体大小？

你需要的全应用自动生效的方案是存在的，不需要逐个给Text组件绑定样式依赖，不同技术栈的核心实现逻辑一致：先维护全局可访问的字体大小配置，再通过修改原生组件默认属性、封装自定义通用组件、全局样式注入三种方式，让所有Text组件默认读取全局配置。
以下是主流技术栈的具体实现参考：

React Native 场景 #

• 方案1：直接覆盖原生Text组件默认逻辑
  在应用入口文件中加入如下代码，不需要修改现有业务层的Text引用即可全局生效：

import { Text } from 'react-native';

// 全局存储字体缩放比例，默认1.0为标准大小
global.appFontScale = 1.0;
const originalRender = Text.render;

Text.render = function (props, ref) {
  const finalStyle = [
    props.style,
    { 
      fontSize: (props.style?.fontSize ?? 14) * global.appFontScale 
    }
  ];
  return originalRender.call(this, { ...props, style: finalStyle }, ref);
};

切换字体大小时修改global.appFontScale的数值，触发应用根组件重渲染后所有Text的字体都会自动按比例缩放。如果需要保留部分Text的固定大小，可在上述逻辑中增加自定义属性判断跳过缩放即可。

• 方案2：封装自定义Text组件
  如果不想修改原生组件的默认行为，可封装全局通用的自定义Text组件，业务层统一使用该组件：

// 通用组件文件 AppText.js
import { Text } from 'react-native';
// 从全局状态管理中获取字体缩放比例，比如Context、Redux等
import { useAppFontScale } from '../contexts/fontConfig';

export default function AppText(props) {
  const fontScale = useAppFontScale();
  const finalStyle = [
    props.style,
    { 
      fontSize: (props.style?.fontSize ?? 14) * fontScale 
    }
  ];
  return <Text {...props} style={finalStyle} />;
}

Flutter 场景 #

直接通过主题配置即可实现全局生效，无需修改现有Text组件引用：

1. 用状态管理工具（Provider、GetX等）维护全局字体缩放系数
2. 将MaterialApp的theme配置和全局字体系数绑定

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      // 所有内置文本样式统一按缩放系数调整
      bodyLarge: TextStyle(fontSize: 16 * fontScale),
      bodyMedium: TextStyle(fontSize: 14 * fontScale),
      titleMedium: TextStyle(fontSize: 18 * fontScale),
      // 其他需要适配的文本样式依次配置即可
    ),
  ),
  home: const HomePage(),
);

切换字体大小时更新全局fontScale的值，触发MaterialApp重绘后所有使用主题默认样式的Text都会自动更新。

Web 前端（React/Vue/原生JS）场景 #

优先使用rem或者CSS变量实现，兼容性高改造成本低：

• rem方案：所有字体大小都用rem作为单位，默认根元素font-size设为16px（1rem=16px），切换字体时直接修改根元素font-size即可：

// 切换为1.2倍大字体
document.documentElement.style.fontSize = `${16 * 1.2}px`;

• CSS变量方案：不需要修改现有字体单位配置，全局注入变量和样式规则即可：

:root {
  --font-scale: 1;
}
* {
  font-size: calc(var(--font-scale) * var(--current-font-size, 14px)) !important;
}

切换时修改根元素变量值即可全局生效：

document.documentElement.style.setProperty('--font-scale', 1.2);

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