Expo 字体加载成功但不渲染的解决方案-js教程-PHP中文网

本文详解 Expo 中 useFonts 返回 isLoaded 为 true 却仍无法渲染自定义字体的根本原因——未正确触发 SplashScreen 隐藏逻辑，并提供可立即生效的修复方案与最佳实践。

本文详解 expo 中 `usefonts` 返回 `isloaded` 为 `true` 却仍无法渲染自定义字体的根本原因——未正确触发 splashscreen 隐藏逻辑，并提供可立即生效的修复方案与最佳实践。

在 Expo 应用中，使用 expo-font 的 useFonts Hook 加载自定义字体是一个常见操作。但开发者常遇到一个看似矛盾的现象：isLoaded 返回 true，控制台无报错，路径确认无误，字体文件也已正确注册，然而 Hello 依然回退到系统默认字体（如 San Francisco 或 Roboto），直到手动注释/取消注释代码才“意外”生效。

根本原因在于：useFonts 仅负责异步加载并返回加载状态，它本身不阻塞渲染，也不自动触发 UI 重绘或 SplashScreen 隐藏。而你当前代码中关键的 handleOnLayout 是一个被 useCallback 包裹的函数，却从未被调用！

const handleOnLayout = useCallback(async () => {
  if (isLoaded) {
    await SplashScreen.hideAsync();
  }
}, [isLoaded]);
// ❌ 此函数被定义，但从未执行 —— 它只是个“待命的函数”，不是副作用逻辑

useCallback 的作用是缓存函数引用以避免不必要的子组件重渲染，但它不会自动运行。因此，即使 isLoaded === true，SplashScreen.hideAsync() 也不会执行，导致 Splash Screen 持续遮盖内容，且后续文本因字体尚未被“正式激活”（需配合布局完成与重绘）而无法正确应用。

✅ 正确做法：将字体加载完成后的副作用逻辑移至 useEffect 中，并依赖 isLoaded 触发：

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

// 防止 Splash Screen 自动隐藏（必须在组件外或顶层调用）
SplashScreen.preventAutoHideAsync();

const HomeScreen = () => {
  const [isLoaded] = 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 响应 isLoaded 变化，主动执行隐藏逻辑
  useEffect(() => {
    if (isLoaded) {
      SplashScreen.hideAsync().catch(console.error);
    }
  }, [isLoaded]);

  // ⚠️ 注意：务必确保组件在 isLoaded 为 true 前不渲染依赖自定义字体的 UI
  // 否则可能出现闪烁或回退字体。推荐结合条件渲染：
  if (!isLoaded) {
    return null; // 或显示 loading placeholder
  }

  return (
    <view style="{styles.container}"><text style="{[styles.title," fontfamily:>Welcome to Nocram</text><text style="{[styles.body," fontfamily:>Practice makes perfect.</text></view>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' },
  title: { fontSize: 28, fontWeight: 'normal' },
  body: { fontSize: 16, marginTop: 12 },
});

export default HomeScreen;

? 关键注意事项：

SplashScreen.preventAutoHideAsync() 必须在组件挂载前调用（通常放在 App.js 顶部或 _layout.tsx 中），否则可能因时机问题失效；
避免在 isLoaded === false 时渲染 fontFamily 样式，否则 React Native 会尝试应用未就绪字体，导致不可预测的回退行为；
若使用 expo-router，建议在 app/_layout.tsx 中统一处理字体加载与 Splash 控制，提升首屏体验一致性；
在生产环境（尤其是 EAS Build），请确保字体文件已包含在 assetBundlePatterns 中（app.json 或 app.config.js），否则 iOS/Android 打包后字体路径会失效。

遵循以上模式，即可彻底解决“字体已加载却无法渲染”的典型陷阱——本质不是字体没加载，而是 UI 生命周期未与加载状态正确同步。