React Native iOS 修复：MaterialIcons 显示 “？”（字体未加载问题完整解决方案）

如果你的 React Native 应用在 iOS 上显示 ? 而不是 MaterialIcons 图标，通常是因为 iOS 没有正确加载图标字体导致的。

本文将讲解：

• 问题出现的原因
• 完整修复方法
• 常见坑：Multiple commands produce MaterialIcons.ttf

---

问题现象

你可能在代码中使用：

import MaterialIcons from '@react-native-vector-icons/material-icons';

并这样渲染图标：

<MaterialIcons name="dashboard" size={24} color="#2563eb" />

但在 iOS 上出现：

• 显示 ?
• 图标为空白
• 图标无法显示

---

根本原因

问题的核心是 MaterialIcons.ttf 没有被正确加载到 iOS App Bundle 中。

在 iOS 中，字体必须满足：

1. 被加入 App 资源文件
2. 在 Info.plist 中注册

如果缺少任何一步，iOS 就无法渲染字体图标，只会显示 ?。

---

解决方案（推荐做法）

第一步：在 Info.plist 注册字体

打开文件：

ios/<YourAppName>/Info.plist

添加以下内容：

<key>UIAppFonts</key>
<array>
  <string>MaterialIcons.ttf</string>
</array>

如果已经存在 UIAppFonts，只需追加：

<string>MaterialIcons.ttf</string>

---

第二步：清理并重新构建 iOS 项目

修改 Info.plist 后必须重新编译 App。

方法一：Xcode

• Product → Clean Build Folder
• 删除模拟器或真机上的 App
• 重新运行

方法二：命令行

npm run ios

如果问题仍然存在：

rm -rf ~/Library/Developer/Xcode/DerivedData

然后再次重新构建。

---

常见问题：Multiple commands produce MaterialIcons.ttf

你可能会看到以下错误：

Multiple commands produce ... MaterialIcons.ttf

原因

字体被重复复制了：

• Xcode Build Phases（Copy Bundle Resources）
• CocoaPods 自动复制资源

---

解决字体重复复制问题

必须确保 只有一个来源 复制字体文件。

方案一（推荐）

如果 CocoaPods 已经处理字体：

删除：

Build Phases → Copy Bundle Resources

中的 MaterialIcons.ttf

方案二

如果你手动管理字体：

• 确保 CocoaPods 没有重复复制

修复后：

• Clean Build
• 重新运行 App

---

为什么 iOS 比 Android 更容易出现这个问题

iOS 对资源管理更严格：

• 必须在 Info.plist 中注册字体
• 必须正确打包到 App Bundle
• 没有 Android 那种自动字体 fallback

任何一步遗漏都会导致图标显示 ?。

---

快速检查清单

• ✔ 项目中存在 MaterialIcons.ttf
• ✔ Info.plist 中有 UIAppFonts
• ✔ UIAppFonts 中已添加字体
• ✔ Xcode 没有重复字体拷贝
• ✔ 已清理并重新构建

---

最终正确代码

import MaterialIcons from '@react-native-vector-icons/material-icons';

<MaterialIcons name="dashboard" size={24} color="#2563eb" />

注意：代码本身没有问题，问题在于 iOS 原生字体加载配置。

---

总结

如果 iOS 上 MaterialIcons 显示 ?：

• 在 Info.plist 中注册 MaterialIcons.ttf
• 避免 Xcode / CocoaPods 重复复制字体
• 清理并重新构建项目

完成以上步骤后，图标即可在 iOS 正常显示。

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️