React Native如何实现基于屏幕分辨率的动态字体大小？

嘿，我刚好在React Native项目里处理过类似的动态字体适配需求，给你分享几个亲测好用的实现方案：

这个是入门级的方案，核心思路是先定好设计稿的基准宽度（比如常用的375px，对应iPhone SE的宽度），然后计算当前设备屏幕宽度和基准宽度的比例，把字体大小按这个比例缩放，就能保证在不同分辨率的设备上字体视觉大小一致。

你可以写一个工具函数来复用这个逻辑：

import { Dimensions } from 'react-native';

// 设计稿的基准宽度，根据你的设计稿调整
const BASE_DESIGN_WIDTH = 375;
const { width: SCREEN_WIDTH } = Dimensions.get('window');

export const scaleFontSize = (baseSize) => {
  // 计算缩放比例
  const scaleRatio = SCREEN_WIDTH / BASE_DESIGN_WIDTH;
  // 计算缩放后的字体大小，加范围限制避免极端情况
  return Math.max(Math.min(baseSize * scaleRatio, 24), 12);
};

使用的时候直接调用这个函数就行：

<Text style={{ fontSize: scaleFontSize(16) }}>这是适配后的文字</Text>

上面的方案在屏幕旋转的时候不会自动更新字体大小，如果你需要支持横竖屏切换，可以把逻辑封装成自定义Hook，监听屏幕尺寸变化：

import { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

const BASE_DESIGN_WIDTH = 375;

export const useResponsiveFont = (baseSize) => {
  const [fontSize, setFontSize] = useState(baseSize);

  const updateFontSize = () => {
    const { width } = Dimensions.get('window');
    const scaleRatio = width / BASE_DESIGN_WIDTH;
    const scaledSize = baseSize * scaleRatio;
    setFontSize(Math.max(Math.min(scaledSize, 24), 12));
  };

  useEffect(() => {
    // 初始化计算一次
    updateFontSize();
    // 监听屏幕尺寸变化
    const dimensionListener = Dimensions.addEventListener('change', updateFontSize);
    // 组件卸载时移除监听
    return () => dimensionListener?.remove();
  }, [baseSize]);

  return fontSize;
};

使用的时候更简洁，而且横竖屏切换会自动更新：

const titleFontSize = useResponsiveFont(20);
<Text style={{ fontSize: titleFontSize }}>自适应横竖屏的标题</Text>

如果项目里很多地方都要用到适配字体，直接封装一个全局的ResponsiveText组件会更省心，不用每次都手动调用工具函数：

import React from 'react';
import { Text, Dimensions } from 'react-native';

const BASE_DESIGN_WIDTH = 375;
const { width: SCREEN_WIDTH } = Dimensions.get('window');

const ResponsiveText = ({ style, ...props }) => {
  // 提取传入的字体大小，默认14px
  let targetFontSize = style?.fontSize || 14;
  const scaleRatio = SCREEN_WIDTH / BASE_DESIGN_WIDTH;
  const scaledFontSize = Math.max(Math.min(targetFontSize * scaleRatio, 24), 12);

  // 合并样式，把适配后的字体大小覆盖进去
  const mergedStyle = [style, { fontSize: scaledFontSize }];

  return <Text style={mergedStyle} {...props} />;
};

export default ResponsiveText;

之后在项目里直接替换原生的Text组件就行：

<ResponsiveText style={{ fontSize: 16, color: '#333' }}>直接用这个组件就自动适配啦</ResponsiveText>

如果想更贴合用户的使用习惯，可以结合系统的字体缩放设置（比如用户在手机设置里调大了字体），用PixelRatio.getFontScale()获取系统的字体缩放比例，修改工具函数：

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

const BASE_DESIGN_WIDTH = 375;
const { width: SCREEN_WIDTH } = Dimensions.get('window');
// 获取系统字体缩放比例
const SYSTEM_FONT_SCALE = PixelRatio.getFontScale();

export const scaleFontSize = (baseSize) => {
  const scaleRatio = SCREEN_WIDTH / BASE_DESIGN_WIDTH;
  // 同时应用屏幕比例和系统字体缩放
  const scaledSize = baseSize * scaleRatio * SYSTEM_FONT_SCALE;
  return Math.max(Math.min(scaledSize, 24), 12);
};

这样既保证了不同屏幕的适配，又尊重了用户的系统设置，体验会更好～

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