本文详解 Expo 应用中 useFonts 返回 true 却字体不生效的典型原因：handleOnLayout 回调未被实际触发，导致 SplashScreen 未正确隐藏、UI 未重绘，最终字体样式无法应用。
本文详解 expo 应用中 `usefonts` 返回 `true` 却字体不生效的典型原因：`handleonlayout` 回调未被实际触发，导致 splashscreen 未正确隐藏、ui 未重绘，最终字体样式无法应用。
在 Expo 项目中，使用 expo-font 的 useFonts Hook 加载自定义字体是一个标准流程。然而，许多开发者会遇到这样一种“诡异”现象：isLoaded 确实为 true，控制台无报错，字体文件路径完全正确，但
根本原因在于：你定义了 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 (
<View style={styles.container}>
<Text style={styles.title}>Welcome to Nocram</Text>
<Text style={styles.subtitle}>Using NeulisAltRegular</Text>
</View>
);
};
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 状态守卫渲染，即可彻底解决该问题，同时提升启动体验的稳定性和专业性。
