如何在React Native项目中添加Google Fonts并解决iOS端不生效问题

解决方案 #

iOS 端识别字体用的是字体内部的 PostScript 名称，和 Android 直接用文件名的逻辑不同，按照以下步骤排查配置即可：

• 首先确认字体的正确 PostScript 名称：Mac 上直接双击打开 Lobster-Regular 字体文件，弹窗顶部显示的名称就是有效名称，大概率和你当前填写的 Lobster-Regular 不一致，常见的 Lobster 常规体内部名称就是 Lobster，以你自己查到的实际值为准。
• 检查 Xcode 项目配置：
  1. 打开 iOS 目录下的 .xcworkspace 项目文件，查看左侧导航的 Resources 文件夹是否存在 Lobster 字体文件，不存在就手动拖入，弹窗要勾选 Copy items if needed 和对应 App target
  2. 选中项目根目录，进入对应 App target 的 Build Phases 标签，展开 Copy Bundle Resources，确认字体文件在列表内，不在就手动添加
  3. 进入 target 的 Info 标签，找到 Fonts provided by application 配置项（没有就手动新增，类型选 Array），添加一条 item，值填字体的完整文件名（带后缀，比如 Lobster-Regular.ttf，大小写必须和实际文件完全一致）
• 修改样式配置：把你字体配置里的 heading 字段值，替换为第一步查到的正确 PostScript 名称
• 清理缓存重新运行：

  rm -rf ios/build
  npx react-native run-ios
  

注意：之前安装的 Expo 字体相关依赖要完全卸载、对应 import 代码要全部删除，避免两种字体引入方案冲突。

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