基于Expo的React Native应用中FontAwesome图标不显示如何解决

• 托管模式下Metro或Expo Go缓存异常，字体资源未正常加载
• 原生工作流/预构建项目未配置字体打包规则，FontAwesome字体文件未被打包进原生应用包
• 外层容器无明确样式约束，图标尺寸超出容器可视范围被裁剪
• @expo/vector-icons版本与当前项目Expo SDK版本不兼容

托管模式（使用Expo Go运行） #

• 清除缓存重启项目：执行命令 npx expo start --clear，同时彻底关闭后台的Expo Go进程，再重新扫码加载项目
• 修复外层容器样式：给包裹图标的View添加明确的宽高与对齐规则，示例如下：

import React from 'react';
import { View } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

export default function LiveCalls( { navigation }) {
    return (
        <View style={{ width: '100%', height: 300, alignItems: 'center', justifyContent: 'center' }}>
            <FontAwesome name="search" size={204} color="black" />
        </View>
    );
}

• 执行npx expo install @expo/vector-icons，自动匹配安装与当前SDK适配的依赖版本，排除版本兼容问题

原生工作流/已执行prebuild的项目 #

• 在app.json中添加字体打包配置：

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf"]
        }
      ]
    ]
  }
}

• 执行npx expo prebuild --clean清理旧的原生构建产物，重新生成原生项目配置
• 重新编译运行原生应用：iOS端可提前检查Xcode项目的「Build Phases - Copy Bundle Resources」中是否已包含FontAwesome.ttf，未包含可手动添加后再编译

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