React Native自定义字体报错：Unrecognized font family 求助

已执行操作回顾 #

• 将自定义字体文件放入assets/fonts文件夹，尝试过多种不同字体
• 创建react-native.config.js文件，配置"assets": ['./assets/fonts']
• 执行pod deintegrate / pod install
• 执行npx react-native-asset
• 在Xcode中更新plist值以指向字体

额外排查与解决步骤 #

1. 确认字体实际 fontFamily 名称
   字体文件名和系统识别的fontFamily名称可能不一致，比如文件名为CustomFont-Regular.ttf，实际可用的fontFamily可能是CustomFont或CustomFont Regular。打开Mac字体册（Font Book）查看字体的「字体名称」字段，这才是代码中需要使用的准确值。

2. 修正react-native.config.js格式
   确保配置文件为正确的CommonJS格式，不要用引号包裹assets键：

   module.exports = {
     assets: ['./assets/fonts'],
   };
   

3. 验证字体打包状态

   • iOS端：在Xcode中进入项目的Build Phases -> Copy Bundle Resources，确认字体文件已在列表中，未添加则手动导入assets/fonts下的所有字体。
   • Android端：检查android/app/src/main/assets/fonts目录是否存在目标字体文件，npx react-native-asset未自动复制的话，手动将字体文件拷贝到该目录。

4. 清理缓存并重启项目
   执行缓存清理命令后，彻底关闭Metro、模拟器/真机再重启：

   npx react-native start --reset-cache
   

5. 检查iOS Info.plist配置准确性
   确保UIAppFonts数组中的文件名与assets/fonts下的文件完全一致（iOS对大小写敏感）：

   <key>UIAppFonts</key>
   <array>
     <string>CustomFont-Regular.ttf</string>
     <string>CustomFont-Bold.ttf</string>
   </array>
   

6. 用极简组件测试
   创建无干扰的测试组件，验证字体是否生效：

   import { Text, View } from 'react-native';
   
   export default function TestFont() {
     return (
       <View>
         <Text style={{ fontFamily: 'CustomFont', fontSize: 20 }}>测试自定义字体</Text>
       </View>
     );
   }
   

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