如何阻止Android系统字体设置更改React Native应用内字体？

问题现象 #

当用户将系统字体设置为粗体时，React Native应用会出现两类异常：

• 布局错乱：组件排版偏移、尺寸计算错误
• 图标与文字异常：图标显示为[x]占位符，部分汉字渲染异常（表现因设备而异）

问题原因 #

1. 布局错乱：React Native默认继承系统字体设置，粗体字的字形宽度、行高与常规字体存在差异，组件尺寸计算依赖的字体度量值改变后，就会出现布局偏移。
2. 图标/文字异常：第三方图标依赖专用字体文件，系统全局强制粗体的设置会干扰图标字体的解析逻辑，导致图标无法正常渲染；部分汉字异常则是因为粗体字库的字符覆盖率、渲染规则与常规字体不一致。

解决方案 #

1. 强制组件使用常规字重 #

在组件样式中明确指定fontWeight: 'normal'，覆盖系统的粗体强制设置，同时可以指定具体字体避免继承问题：

import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  baseText: {
    fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif',
    fontWeight: 'normal',
  },
  icon: {
    fontFamily: 'Ionicons', // 替换为你的图标字体名称
    fontWeight: 'normal',
  },
});

2. 全局样式覆盖 #

在全局样式中统一重置字重，确保所有文本组件默认不使用粗体：

import { StyleSheet } from 'react-native';

const globalStyles = StyleSheet.create({
  text: {
    fontWeight: 'normal',
  },
});

使用时直接引用该样式，或通过自定义组件封装文本组件，默认应用此样式。

3. 图标组件单独处理 #

针对第三方图标组件，强制设置fontWeight: 'normal'，避免系统粗体干扰：

import Ionicons from 'react-native-vector-icons/Ionicons';

<Ionicons
  name="settings"
  size={24}
  color="#333"
  style={{ fontWeight: 'normal' }}
/>

4. Android平台额外配置 #

在Android项目的android/app/src/main/res/values/styles.xml中，修改AppTheme配置，强制使用常规字体样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:fontFamily">sans-serif</item>
  <item name="android:textStyle">normal</item>
</style>

验证方法 #

修改完成后，切换系统字体的粗体开关，测试应用的布局、图标及文字渲染是否恢复正常，覆盖不同设备型号与系统版本。

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