React-Native iOS中'Unrecognized font family 'anticon''问题求助

环境信息 #

• Node v16.16.0
• npm 8.11.0
• React-Native 0.69.0
• Pod 1.11.3
• react-native-vector-icons@^9.2.0

已执行操作 #

1. 安装react-native-vector-icons
2. 将node_modules/react-native-vector-icons/Fonts文件夹复制到Xcode打开的projectName.xcworkspace中
3. 手动添加.ttf字体名称到项目
4. 执行pod install
5. Info.plist已自动添加完整字体列表（包含AntDesign.ttf）

问题 #

运行项目时出现错误：Unrecognized font family 'anticon'

解决方案 #

1. 确认字体文件已关联到项目Target #

打开Xcode的projectName.xcworkspace：

• 在左侧导航栏找到添加的Fonts文件夹，选中所有.ttf字体文件
• 查看右侧File Inspector面板，确保Target Membership下你的项目主Target处于勾选状态

  很多时候只是复制了文件，但没关联到Target，导致打包时字体不会被包含进去

2. 确认字体文件已实际复制到项目目录 #

重新添加字体时，务必勾选Copy items if needed选项：

• 如果之前没勾选，删除已添加的Fonts文件夹，重新从node_modules/react-native-vector-icons/Fonts复制到Xcode，勾选该选项，确保字体文件被复制到项目本地目录，而非仅引用node_modules中的文件

3. 清理所有缓存并重新构建 #

• 清理Xcode构建缓存：点击Xcode顶部菜单 Product > Clean Build Folder（快捷键 Cmd + Shift + K）
• 清理iOS模拟器缓存：打开模拟器，点击菜单 Hardware > Erase All Content and Settings
• 清理React Native缓存：在终端执行命令：

  npx react-native start --reset-cache
  

• 重新执行pod install，然后直接从Xcode运行项目（避免使用react-native run-ios，确保Xcode使用最新的构建配置）

4. 验证字体名称匹配 #

react-native-vector-icons中AntDesign图标对应的 fontFamily是anticon，而字体文件名为AntDesign.ttf，这是正确的映射。如果仍有问题，可以通过以下方式验证系统识别的字体名称：

• 在Xcode中新建一个测试Swift文件，添加以下代码打印已加载的字体：

  for family in UIFont.familyNames.sorted() {
      let names = UIFont.fontNames(forFamilyName: family)
      print("Family: \(family) Font names: \(names)")
  }
  

• 运行项目后在控制台搜索anticon或AntDesign，确认字体是否被正确加载

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