React Native Windows中@react-native-vector-icons图标显示为空方块求助

问题背景 #

使用npx react-native init-windows --overwrite生成的cpp-app模板开发RN Windows应用，所有@react-native-vector-icons图标均显示为空方块。已完成官方要求的字体配置（复制.ttf到Assets目录、Visual Studio添加文件、重建应用），尝试过static导入、清理构建目录等操作，问题仍存在。

环境信息：

{
  "react-native": "0.81.5",
  "react-native-windows": "0.81.0",
  "@react-native-vector-icons/fontawesome": "^13.1.0"
}

Windows初始化配置：

"react-native-windows": {
  "init-windows": {
    "name": "Client",
    "namespace": "Client",
    "template": "cpp-app"
  }
}

核心额外配置（cpp-app模板专属） #

RN Windows的cpp-app模板默认不会自动注册字体到系统应用资源，需要手动补充以下步骤：

1. 修改Package.appxmanifest #

打开windows/Client/Package.appxmanifest，在<Application>节点内添加字体注册扩展：

<Extensions>
  <uap:Extension Category="windows.fonts">
    <uap:Fonts>
      <uap:Font File="Assets/FontAwesome.ttf" />
      <!-- 其他图标字体如MaterialIcons.ttf等，按此格式依次添加 -->
    </uap:Fonts>
  </uap:Extension>
</Extensions>

注意替换为你实际放入Assets目录的字体文件名，路径必须和文件位置一致。

2. 确认字体文件属性设置 #

在Visual Studio中选中Assets目录下的.ttf文件，右键打开属性面板：

• 将内容类型设置为Font
• 复制到输出目录选择如果较新则复制
• 确保项类型为Font（若不是，右键→项类型→Font）

3. 可选：手动在CPP代码中验证字体加载 #

在App.cpp的OnLaunched方法中添加以下代码，验证字体是否成功加载：

#include <winrt/Windows.UI.Xaml.Media.h>
#include <winrt/Windows.Storage.h>

// 注册并验证字体
auto fontUri = Windows::Foundation::Uri(L"ms-appx:///Assets/FontAwesome.ttf");
auto fontFamily = Windows::UI::Xaml::Media::FontFamily(fontUri.ToString());
// 输出调试日志，可在VS输出窗口查看
OutputDebugString(L"Loaded font source: ");
OutputDebugString(fontFamily.Source().c_str());
OutputDebugString(L"\n");

其他排查要点 #

• 图标名称正确性：部分图标在字体包版本迭代中名称有变更，务必核对@react-native-vector-icons/fontawesome对应版本的官方图标列表。
• 字体文件版本匹配：确保Assets中的.ttf文件和你安装的@react-native-vector-icons/fontawesome版本一致（比如v13.1.0对应FontAwesome 6.x，不要混用旧版本字体文件）。
• 重新触发自动链接：执行npx react-native link @react-native-vector-icons/fontawesome，虽然RN Windows 0.80+默认开启自动链接，但手动触发可能修复配置遗漏。

验证示例代码 #

import { View, StyleSheet } from 'react-native';
import { FontAwesome } from '@react-native-vector-icons/fontawesome';

export default function TestIcons() {
  return (
    <View style={styles.container}>
      <FontAwesome name="home" size={32} color="#000" />
      <FontAwesome name="user-circle" size={32} color="#2196F3" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 30,
    gap: 20,
    alignItems: 'center',
  },
});

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