React Native for Windows底部导航栏图标显示方块问题求助

问题原因分析 #

你遇到的Windows端图标显示方块的问题，通常由以下原因导致：

• 字体文件未在Windows应用清单中注册，系统无法识别加载
• 字体文件版本与react-native-vector-icons依赖的版本不匹配
• 项目缓存未清理，旧资源未被替换
• 字体文件路径或文件名存在拼写/大小写问题（虽然Windows不严格区分，但配置时最好保持一致）

必须执行的额外步骤 #

1. 确认字体文件来源与路径 #

确保你使用的Ionicons.ttf和MaterialCommunityIcons.ttf是直接从node_modules/react-native-vector-icons/Fonts/目录复制的，而非第三方下载版本——不同版本的字体文件内部字符映射可能不一致，会导致图标无法匹配。

确认文件已正确放置在路径：...\TestNavigation1\windows\TestNavigation1\Assets\，文件名无拼写错误（比如不要写成ionicons.ttf全小写）。

2. 在Windows应用清单中注册字体 #

打开windows/TestNavigation1/Package.appxmanifest文件，在<Application>标签内部添加<Extensions>节点，注册你用到的字体：

<Extensions>
  <!-- 注册Ionicons字体 -->
  <uap:Extension Category="windows.fonts">
    <uap:Fonts>
      <uap:Font File="Assets/Ionicons.ttf" />
      <!-- 如果用到MaterialCommunityIcons，也要添加 -->
      <uap:Font File="Assets/MaterialCommunityIcons.ttf" />
    </uap:Fonts>
  </uap:Extension>
</Extensions>

保存文件，确保格式正确无语法错误。

3. 清理缓存并重新构建Windows项目 #

缓存会导致新添加的字体无法被加载，必须执行清理后重新构建：

• 关闭所有打开的Visual Studio窗口
• 在项目根目录运行命令：

  npx react-native run-windows --clean
  

  或者打开Visual Studio，右键解决方案选择清理解决方案，然后再选择生成解决方案。

4. 验证字体内部名称（可选） #

如果以上步骤仍未解决，可检查字体的内部名称是否与react-native-vector-icons期望的一致：

• 右键Ionicons.ttf文件，选择“打开”（用Windows自带的字体查看器）
• 查看窗口顶部显示的字体名称（比如Ionicons的内部名称就是"Ionicons"）
• 如果名称不匹配，可能需要修改react-native-vector-icons的配置，但这种情况极少出现，通常官方包的字体都是正确的。

完成以上步骤后，Windows端的图标应该就能和Android端一样正常显示了。

内容的提问来源于stack exchange，提问作者OrrO Prm.