React Native fontFamily在iOS和Android平台失效问题求助

以下是针对你遇到的iOS和Android平台fontFamily均不生效问题的实用排查步骤：

1. 验证字体文件与名称匹配 #

• 确认./assets/fonts/目录下存在对应字体文件（如GoblinOne-Regular.ttf），文件名需与代码中fontFamily值完全一致（iOS对大小写敏感）。
• 检查字体内部的PostScript名称：部分字体的文件名和实际内部名称不一致，这会导致调用失效。
  • Mac：用Font Book打开字体，右键选择「显示字体信息」，查看「PostScript名称」。
  • Windows：使用字符映射表或字体工具（如FontForge）查看字体的内部名称。
    代码中的fontFamily必须使用这个内部名称，而非文件名。

2. 确认资源链接与项目编译 #

• 执行npx react-native-asset后，必须重启Metro Bundler，否则缓存会导致新字体不加载。

• Android 端检查 #

  • 查看android/app/src/main/assets/fonts/目录是否已自动复制字体文件，若未复制，手动将字体文件粘贴至此。
  • 清理并重新编译项目：

    cd android && ./gradlew clean && ./gradlew assembleDebug
    

• iOS 端检查 #

  • 打开Xcode，进入项目的Build Phases → Copy Bundle Resources，确认字体文件已被添加。若未添加，手动拖拽字体文件到该列表。
  • 清理Xcode缓存（Command + Shift + K），然后重新编译项目。

3. 代码层面验证 #

• 确保StyleSheet中fontFamily的拼写完全正确，无大小写或字符错误。
• 避免设置与字体不匹配的fontWeight：若GoblinOne-Regular仅包含常规字重，不要额外设置fontWeight，或显式设置为'normal'，否则可能导致字体 fallback 到系统默认字体。

4. 调试验证 #

• Android：使用adb shell dumpsys activity top命令查看当前页面的视图属性，确认fontFamily是否被正确应用。
• iOS：通过Xcode的「Debug View Hierarchy」功能，查看Text组件的字体配置详情。

内容的提问来源于stack exchange，提问作者Khuong Viet Tai