Expo字体已加载却无法渲染的问题求助

针对冷启动时字体已加载（isLoaded为true）但无法渲染、仅热重载时生效的问题，以下是几个可行的解决方案：

1. 控制页面渲染时机 #

确保所有使用自定义字体的组件在字体完全加载后再初始化，避免组件提前渲染导致字体未生效：

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'),
  });

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

  // 字体未加载完成时返回空视图，避免提前渲染组件
  if (!isLoaded) {
    return null;
  }

  return (
    <View onLayout={handleOnLayout} style={styles.container}>
      {/* 你的页面内容 */}
      <Text style={{ fontFamily: 'Typographica' }}>测试文本</Text>
    </View>
  );
};

2. 强制触发组件重渲染 #

给使用自定义字体的Text组件添加动态key，当字体加载完成后更新key，强制组件重新渲染并应用字体：

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'),
  });

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

  return (
    <View onLayout={handleOnLayout} style={styles.container}>
      <Text 
        key={isLoaded ? 'font-ready' : 'font-pending'}
        style={{ fontFamily: isLoaded ? 'Typographica' : undefined }}
      >
        测试文本
      </Text>
    </View>
  );
};

3. 验证字体内部名称 #

字体文件的实际内部名称（PostScript名称）可能与文件名不一致，导致expo-font无法正确识别：

• Windows：右键字体文件 → 属性 → 详细信息 → 字体名称
• Mac：打开字体文件，查看顶部显示的官方名称

如果名称不符，修改useFonts中的字体名称：

let [isLoaded] = useFonts({
  // 替换为实际的字体内部名称
  'Typographica-Regular': require('nocram/assets/fonts/Typographica.ttf'),
});

4. 手动加载字体 #

改用expo-font的loadAsync方法手动加载字体，更精准控制加载流程：

import React, { useState, useEffect } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';

SplashScreen.preventAutoHideAsync();

const HomeScreen = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const loadFonts = async () => {
      try {
        await Font.loadAsync({
          'Typographica': require('nocram/assets/fonts/Typographica.ttf'),
          'NeulisAltRegular': require('nocram/assets/fonts/NeulisAlt-Regular.ttf'),
          'NeulisAltExtraBold': require('nocram/assets/fonts/NeulisAlt-ExtraBold.ttf'),
        });
      } catch (err) {
        console.warn('字体加载失败:', err);
      } finally {
        setIsLoaded(true);
        await SplashScreen.hideAsync();
      }
    };

    loadFonts();
  }, []);

  if (!isLoaded) return null;

  return (
    <View style={styles.container}>
      {/* 页面内容 */}
    </View>
  );
};

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