如何在React Native应用中关闭iOS系统粗体文本无障碍设置？

这个问题我之前在项目里也踩过坑，iOS的系统级粗体文本辅助功能确实会让RN的Text组件默认继承这个样式，而allowFontScaling={false}只负责关闭字体缩放，对粗体设置完全不起作用。下面分享几个实用的解决方法：

1. 全局自定义Text组件（最推荐） #

创建一个全局复用的自定义Text组件，强制覆盖iOS的粗体样式，这样项目里所有文本都能统一处理，不用逐个修改：

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

const CustomText = ({ style, ...props }) => {
  // 针对iOS设置默认非粗体样式
  const baseStyle = Platform.select({
    ios: {
      fontWeight: 'normal',
      // 要是需要指定系统原生常规字体，也可以写 fontFamily: '.SFUI-Regular'
    },
    android: {}, // Android不受系统粗体设置影响，无需额外处理
  });

  return <Text style={[baseStyle, style]} {...props} />;
};

export default CustomText;

之后项目里所有用到<Text>的地方替换成<CustomText>就行，不管用户开不开系统粗体，你的文本都会保持正常粗细。

2. 单个Text组件单独处理 #

如果只是个别文本需要覆盖粗体，直接给对应的Text组件设置fontWeight: 'normal'即可：

<Text style={{ fontWeight: 'normal' }}>我不会被系统强制粗体</Text>

3. 动态适配系统粗体设置（可选） #

要是你想尊重用户的系统设置，同时又能灵活控制样式，可以用AccessibilityInfo监听系统粗体状态，动态调整文本样式：

import React, { useState, useEffect } from 'react';
import { Text, AccessibilityInfo } from 'react-native';

const AdaptiveText = ({ style, children }) => {
  const [isBoldEnabled, setIsBoldEnabled] = useState(false);

  useEffect(() => {
    // 初始化获取系统粗体状态
    AccessibilityInfo.isBoldTextEnabled().then(setIsBoldEnabled);
    
    // 监听系统粗体设置变化
    const listener = AccessibilityInfo.addEventListener(
      'boldTextChanged',
      setIsBoldEnabled
    );

    return () => listener.remove();
  }, []);

  const adaptiveStyle = {
    fontWeight: isBoldEnabled ? 'bold' : 'normal',
  };

  return <Text style={[adaptiveStyle, style]}>{children}</Text>;
};

export default AdaptiveText;

这个组件会根据用户的系统设置自动切换粗体/常规样式，兼顾无障碍需求和自定义控制。

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