当前位置：首页 > 文章列表 > 文章 > 前端 > Expo字体加载失败怎么解决

Expo字体加载失败怎么解决

2026-04-06 23:51:25 0浏览收藏

你是否也遇到过 Expo 中 useFonts 明明返回 true、控制台无报错、字体路径完全正确，但文本却 stubbornly 拒绝显示自定义字体的“玄学”问题？真相往往藏在生命周期的缝隙里——handleOnLayout 只是被定义却从未被调用，导致 SplashScreen 持续遮挡、UI 未重绘、字体样式根本没机会生效；本文直击这一高频陷阱，手把手教你用 useEffect 统一管控字体加载与闪屏隐藏，并通过 isReady 状态精准守卫渲染时机，彻底告别手动刷新才“突然生效”的尴尬，让自定义字体从启动第一帧就稳稳落地。

如何解决 Expo 中字体已加载但未渲染的问题

本文详解 Expo 应用中 useFonts 返回 true 却字体不生效的典型原因：handleOnLayout 回调未被实际触发，导致 SplashScreen 未正确隐藏、UI 未重绘，最终字体样式无法应用。

本文详解 Expo 应用中 `useFonts` 返回 `true` 却字体不生效的典型原因：`handleOnLayout` 回调未被实际触发，导致 SplashScreen 未正确隐藏、UI 未重绘，最终字体样式无法应用。

在 Expo 项目中，使用 expo-font 的 useFonts Hook 加载自定义字体是一个标准流程。然而，许多开发者会遇到这样一种“诡异”现象：isLoaded 确实为 true，控制台无报错，字体文件路径完全正确，但 Hello 仍显示系统默认字体——直到手动注释/取消注释某行代码（如 fontFamily），界面才突然刷新并正确渲染。

根本原因在于：你定义了 handleOnLayout 这个回调函数，却从未调用它。

你当前的代码中：

const handleOnLayout = useCallback(async () => {
  if (isLoaded) {
    await SplashScreen.hideAsync();
  }
}, [isLoaded]);

useCallback 仅用于记忆化创建函数，它本身不会执行。而 handleOnLayout 是一个普通变量，未绑定到任何事件（例如 onLayout）或副作用钩子中，因此永远不会运行。结果是：

SplashScreen 持续遮挡主界面；
React Native 渲染引擎可能因初始布局未完成而跳过字体样式计算；
即使字体已加载完成，文本组件也未能在“字体就绪”的上下文中完成首次渲染。

✅ 正确做法是：将字体加载完成与 SplashScreen 隐藏逻辑交由 useEffect 统一管理，并确保 UI 在字体就绪后才开始渲染。

以下是推荐的修复方案（适用于 Expo SDK 49+）：

import React, { useState, useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

// 防止 Splash 屏自动隐藏，交由我们控制
SplashScreen.preventAutoHideAsync();

const HomeScreen = () => {
  const [isReady, setIsReady] = useState(false);

  // 加载字体并控制 Splash 显示状态
  const [fontsLoaded] = useFonts({
    'Typographica': require('nocram/assets/fonts/Typographica.ttf'),
    'NeulisAltRegular': require('nocram/assets/fonts/NeulisAlt-Regular.ttf'),
    'NeulisAltExtraBold': require('nocram/assets/fonts/NeulisAlt-ExtraBold.ttf'),
  });

  useEffect(() => {
    if (fontsLoaded) {
      // 字体加载完成后隐藏 Splash 屏
      SplashScreen.hideAsync().finally(() => setIsReady(true));
    }
  }, [fontsLoaded]);

  // ⚠️ 关键：仅当字体就绪后才渲染主界面，避免闪烁或回退到系统字体
  if (!isReady) {
    return null; // 或返回一个轻量级占位 Loading 状态（如空 View）
  }

  return (
    
      Welcome to Nocram
      Using NeulisAltRegular
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' },
  title: { fontFamily: 'NeulisAltExtraBold', fontSize: 24 },
  subtitle: { fontFamily: 'NeulisAltRegular', fontSize: 16, marginTop: 8 },
});

export default HomeScreen;

? 重要注意事项：

不要在 useFonts 后立即渲染含自定义字体的组件：即使 fontsLoaded === true，若 Splash 尚未隐藏，React Native 可能延迟应用字体样式。务必通过 isReady 状态控制渲染时机。
避免滥用 onLayout 触发字体逻辑：onLayout 是高频事件，不适合做一次性初始化操作；useEffect 更语义清晰、性能可控。
验证字体名称是否严格匹配：fontFamily 值必须与 useFonts 键名完全一致（区分大小写、空格和连字符），例如 'NeulisAltRegular' ≠ 'NeulisAlt-Regular'。
调试技巧：可在 useEffect 中添加 console.log('Fonts loaded:', fontsLoaded) 和 console.log('Splash hidden')，确认执行流完整。

总结来说，Expo 字体“加载成功却不渲染”的问题，90% 源于 加载逻辑与 UI 渲染生命周期脱节。通过 useEffect 主动驱动 Splash 隐藏 + isReady 状态守卫渲染，即可彻底解决该问题，同时提升启动体验的稳定性和专业性。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。