react-native-vector-icons显示X而非实际图标如何解决

该问题的核心原因基本都是图标字体文件没有成功打包进APP安装包内，导致系统找不到对应字体渲染图标，才会显示带方框的X占位符

按以下步骤依次排查修复即可：

• 执行自动链接命令同步字体文件
  如果你使用的是React Native 0.60及以上版本，先在项目根目录执行命令：npx react-native link react-native-vector-icons，执行完成后关闭当前的Metro打包服务。
  • 安卓平台：直接重新执行npx react-native run-android编译安装APP即可
  • iOS平台：需要先进入项目ios目录执行pod install，再重新执行npx react-native run-ios编译安装
• 自动链接失效时手动配置字体
  如果自动链接没有生效，可以手动复制字体文件：
  • 安卓端：将node_modules/react-native-vector-icons/Fonts目录下的AntDesign.ttf文件复制到安卓项目的android/app/src/main/assets/fonts目录，没有fonts文件夹可自行新建
  • iOS端：把AntDesign.ttf文件拖入Xcode项目中，确认勾选「Copy items if needed」和对应APP target，再重新编译
• 检查安卓打包配置排除规则
  打开项目android/app/build.gradle文件，查找packagingOptions配置项，确认没有将.ttf后缀的文件加入exclude排除列表，如果有相关配置直接删除针对.ttf文件的排除规则后重新编译即可。
• 清理缓存重新编译
  如果执行完上述操作还是显示X，执行以下命令清理全量缓存后重新运行：

  # 清理Metro缓存
  npx react-native start --reset-cache
  # 新开终端窗口，重新运行对应平台
  # 安卓
  npx react-native run-android
  # iOS
  npx react-native run-ios
  

• 核对图标名称拼写
  你当前使用的AntDesign爱心图标名称heart拼写正确，如果后续使用其他图标可以直接核对react-native-vector-icons官方文档中对应图标库的命名，避免拼写错误导致无法渲染。

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