如何解决iPhone开启显示放大时React Native出现的字体大小异常问题

iPhone开启显示放大功能后，会降低设备的逻辑分辨率（比如标准模式下宽度为375pt的机型，放大后逻辑宽度会降到320pt），同时系统默认会放大所有UI元素的渲染尺寸。如果你的React Native应用使用了大量固定像素的宽高、字体大小配置，就会出现元素溢出、布局挤压的错乱问题。

1. 全局禁用系统缩放（快速修复） #

如果你的应用不需要适配系统的字体/显示缩放需求，可以全局禁用缩放能力，所有元素完全按照设计稿尺寸渲染：
在应用入口文件（通常是index.js或App.js）添加以下配置：

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

// 全局禁用所有文本组件的字体缩放
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

如果需要连视图的放大效果也一起禁用，可以在iOS原生的AppDelegate.m文件的didFinishLaunchingWithOptions方法中添加代码：

[[UIScreen mainScreen] setValue:@(1) forKey:@"_scale"];

2. 动态适配缩放（兼容用户体验的推荐方案） #

如果需要保留对系统缩放的支持，建议使用相对布局+适配函数的方式适配所有场景：

• 布局优先使用Flexbox实现弹性排列，尽量减少固定宽高的使用
• 封装统一的尺寸适配函数，根据设备实际逻辑尺寸自动换算渲染值，示例代码：

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

// 设计稿基准逻辑宽度，一般以iPhone 6/7/8的375pt为基准
const BASE_DESIGN_WIDTH = 375;
const screenWidth = Dimensions.get('window').width;
const adaptScale = screenWidth / BASE_DESIGN_WIDTH;

// 适配所有尺寸（宽、高、边距、圆角等）
export const adaptSize = (designSize) => {
  return PixelRatio.roundToNearestPixel(designSize * adaptScale);
};

// 适配字体大小
export const adaptFont = (designFontSize) => {
  return adaptSize(designFontSize);
};

使用时所有需要设置尺寸的地方都传入设计稿的数值即可，示例：

<Text style={{fontSize: adaptFont(16), marginBottom: adaptSize(12)}}>测试文本</Text>
<View style={{width: adaptSize(200), height: adaptSize(100)}} />

3. 局部禁用缩放 #

如果只有个别组件需要固定尺寸，不需要全局修改，直接给对应Text/TextInput组件单独添加allowFontScaling={false}属性即可：

<Text allowFontScaling={false} style={{fontSize: 16}}>固定大小的标题</Text>

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