React Native如何将第三方库自定义字体覆盖为系统默认字体

报错原因说明 #

你之前的写法报错是因为 iOS 并未公开可调用的字体家族名称里没有 San Francisco 这个字符串，该字体是iOS系统默认字体，不需要显式指定名称，直接不设置 fontFamily 属性就会自动调用。

具体实现方案 #

1. 系统默认字体通用配置 #

首先你可以封装一个通用的系统字体配置，不需要硬编码字体名称：

import { Platform } from 'react-native';

const systemFontFamily = Platform.select({
  ios: undefined, // 不指定字体家族时，iOS 自动使用默认的 San Francisco
  android: 'Roboto', // 安卓默认系统字体
  default: 'sans-serif' // 其他平台兜底
});

2. 全局覆盖所有 Text 组件样式（最推荐） #

如果第三方库使用的是 React Native 官方提供的 Text 组件渲染文本，直接在项目入口文件（比如 App.js/index.js）添加全局默认样式覆盖即可，所有文本自动生效：

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

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.style = [
  Text.defaultProps?.style || {},
  {
    fontFamily: Platform.select({
      ios: undefined,
      android: 'Roboto'
    })
  }
];

3. 单独覆盖指定第三方组件 #

如果全局覆盖不生效，说明第三方组件内部样式优先级更高，直接给目标组件传入 style 属性覆盖字体配置即可：

<ThirdPartyText 
  style={{ 
    fontFamily: Platform.select({ ios: undefined, android: 'Roboto' }) 
  }}
/>

4. 第三方库写死字体的兜底方案 #

如果第三方库把字体配置硬编码在内部代码中，无法通过传参覆盖，可以使用 patch-package 工具直接修改第三方库源码中的字体配置，修改为上述通用系统字体配置后生成补丁，后续安装依赖会自动应用补丁，无需重复修改。

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