React Native自定义字体无法识别问题求助

问题排查点及解决方案 #

1. 修复资源路径不一致问题 #

查看link-assets-manifest.json，发现第一个字体路径为../assets/fonts/Roboto-Black.ttf，其余字体路径为assets/fonts/xxx.ttf，路径不统一会导致资源链接失败：

• 删除link-assets-manifest.json文件
• 重新执行npx react-native-asset，确保生成的manifest中所有字体路径一致

2. 确认iOS主Info.plist配置 #

你提供的是InfoPList-dev（开发环境配置），但主项目的ios/[你的项目名]/Info.plist也需要添加UIAppFonts数组，否则默认环境下字体不会被加载。将以下代码添加到主Info.plist的<dict>节点中：

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
    <string>Roboto-BlackItalic.ttf</string>
    <string>Roboto-Bold.ttf</string>
    <string>Roboto-BoldItalic.ttf</string>
    <string>Roboto-Italic.ttf</string>
    <string>Roboto-Light.ttf</string>
    <string>Roboto-LightItalic.ttf</string>
    <string>Roboto-Medium.ttf</string>
    <string>Roboto-MediumItalic.ttf</string>
    <string>Roboto-Thin.ttf</string>
    <string>Roboto-ThinItalic.ttf</string>
</array>

3. 验证字体真实名称 #

字体文件名和系统识别的PostScript名称可能不一致（比如Roboto-Black.ttf的真实名称可能是Roboto Black），导致调用时无法识别：

• 在Mac上用Font Book打开字体文件，查看「PostScript名称」
• 或在Xcode运行项目后，在控制台执行以下代码打印所有可用字体：

for (NSString *family in [UIFont familyNames]) {
    NSLog(@"Font Family: %@", family);
    for (NSString *font in [UIFont fontNamesForFamilyName:family]) {
        NSLog(@"  %@", font);
    }
}

• 修改代码中的fontFamily为真实名称，比如：

<Text style={{ fontFamily: 'Roboto Black' }}>Ola isso é um teste</Text>

4. 清理全链路缓存 #

缓存问题是常见的字体加载失败原因，执行以下操作：

• 清理React Native缓存：npx react-native start --reset-cache
• 清理iOS缓存：删除ios/build文件夹，执行cd ios && pod install，重启Xcode
• 清理Android缓存：进入android目录，执行./gradlew clean

5. 验证资源是否正确链接 #

• iOS：打开Xcode项目，进入Build Phases -> Copy Bundle Resources，确认所有Roboto字体文件已添加
• Android：检查android/app/src/main/assets/fonts目录下是否存在所有ttf字体文件

内容的提问来源于stack exchange，提问作者Nilton Schumacher F