React Native Expo iOS自定义字体加载失败求助

1. 清理冗余配置 #

• 删除react-native.config.js文件，Expo项目不需要这个原生React Native的资源link配置，它会和expo-font插件冲突。
• 检查app.json里的expo-font插件配置，只保留你实际需要加载的字体路径，比如你要的Avenir字体：

  [
    "expo-font",
    {
      "fonts": ["./assets/fonts/Avenir LT 95 Black Oblique.ttf"]
    }
  ]
  

2. 核心：用字体的系统识别名而非文件名加载 #

iOS系统识别的字体名称和文件名往往不一样，这是绝大多数人踩坑的点：

• 把字体文件拖进Mac的「字体册」应用，顶部显示的名称就是系统真正识别的字体名（比如Avenir LT 95 Black Oblique在字体册里可能显示为AvenirLT-BlackOblique）。
• 在app.js里必须用这个系统识别名作为加载的key：

  const [fontsLoaded, fontError] = useFonts({
    'AvenirLT-BlackOblique': require('./assets/fonts/Avenir LT 95 Black Oblique.ttf'),
  });
  

3. 修正app.js的加载逻辑 #

• 你当前代码里加载的是Inter-Black，和你要的Avenir完全不匹配，直接替换成上面的代码。
• 补充错误排查逻辑，方便定位问题：

  if (fontError) {
    console.error('字体加载失败:', fontError);
    // 这里可以显示错误提示或 fallback 到系统字体
  }
  

• 确保根View绑定onLayout事件，否则启动屏可能无法隐藏：

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <Text style={{ fontFamily: 'AvenirLT-BlackOblique', fontSize: 24 }}>测试自定义字体</Text>
    </View>
  );
  

4. 彻底清理缓存重启 #

• 运行npx expo start -c清除Expo缓存
• 关闭iOS模拟器后重新打开，真机测试则卸载旧App重装

5. 检查字体文件有效性 #

• 确认字体文件没有损坏，换一个可靠来源的同字体重试
• 确保字体格式是iOS支持的（TTF/OTF均支持，但文件本身必须有效）

如果还是失败，打开Expo开发者菜单（模拟器按Cmd+D）查看Logs里的具体报错，比如字体文件找不到、格式不支持等信息。

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