Expo项目中自定义字体无法加载的问题求助

问题根源 #

你当前的核心问题是未等待字体异步加载完成就渲染了使用字体的组件，同时混用了app.json插件预加载和useFonts手动加载两种方式，导致字体注册逻辑冲突。

解决方案一：使用useFonts手动加载（推荐） #

这种方式可以自定义字体别名，更灵活，只需修改App.js，确保字体加载完成后再渲染页面：

import { useState, useEffect } from 'react';
import { View } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

// 阻止启动屏自动隐藏，直到字体加载完成
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [userNumber, setUserNumber] = useState();
  const [isGameOver, setIsGameOver] = useState(false);

  // 获取字体加载状态和错误信息
  const [fontsLoaded, fontError] = useFonts({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });

  // 字体加载完成/出错后，隐藏启动屏
  useEffect(() => {
    if (fontsLoaded || fontError) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  // 字体未加载完成时，返回空或加载组件，避免渲染依赖字体的内容
  if (!fontsLoaded && !fontError) {
    return null;
  }

  // 你的正常页面渲染逻辑
  return (
    <View>
      {/* 你的组件内容 */}
    </View>
  );
}

解决方案二：使用app.json插件预加载 #

如果想保留插件配置，需移除App.js中的useFonts代码，同时注意必须使用字体的实际PostScript名称（不是自定义别名）：

1. 保留app.json中的插件配置：

"plugins": [
  [
    "expo-font",
    {
      "fonts": [
        "./assets/fonts/OpenSans-Regular.ttf",
        "./assets/fonts/OpenSans-Bold.ttf"
      ]
    }
  ]
]

2. 修改样式中的字体名称为字体实际的PostScript名称（可通过字体查看工具确认，通常和文件名一致）：

const styles = StyleSheet.create({
  title: {
    fontFamily: "OpenSans-Regular", // 替换为字体实际名称
    fontSize: 24,
    color: "white",
    textAlign: "center",
    borderWidth: 2,
    borderColor: "yellow",
    padding: 12,
  },
});

通用排查步骤 #

• 验证文件路径：确认assets/fonts/下确实存在对应的.ttf文件，路径大小写和代码中一致（iOS系统区分大小写）。
• 清除缓存：运行npx expo start -c清除Expo缓存，比删除node_modules更高效。
• 避免混用加载方式：不要同时使用app.json插件和useFonts手动加载，二者选其一即可。

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