使用expo-font加载Poppins-Medium字体报错的原因求助

以下是针对你遇到的fontFamily "Poppins-Medium" is not a system font and has not been loaded through Font.loadAsync报错的逐一排查方向：

1. 字体文件路径与命名检查 #

• 确保fontLoader.js中字体文件的相对路径正确，比如字体文件放在assets/fonts/目录下时，路径应为require('../assets/fonts/Poppins-Medium.ttf')，注意大小写敏感（iOS系统会严格区分文件名大小写）。
• 检查字体文件名是否和代码中引用的一致，避免出现Poppins-Medium.ttf写成PoppinsMedium.ttf这类拼写错误。

2. Font.loadAsync键名与使用时的fontFamily完全匹配 #

fontLoader.js中定义的字体键名必须和组件中使用的fontFamily字符串完全一致，示例：

// fontLoader.js 正确写法
import * as Font from 'expo-font';

export const loadFonts = async () => {
  await Font.loadAsync({
    'Poppins-Medium': require('../assets/fonts/Poppins-Medium.ttf'),
    // 其他字体需保持相同的键名-路径对应规则
  });
};

组件中使用时必须严格对应：

// OnboardingScreen.js 正确写法
style={{
  fontFamily: 'Poppins-Medium', // 和fontLoader中的键名完全一致
  fontSize: 16
}}

3. 确保字体加载完成后再渲染页面 #

App.js中需通过状态控制，等待字体加载完成后再渲染使用该字体的组件，避免提前渲染导致报错：

// App.js 正确示例
import { useState, useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import { loadFonts } from './fontLoader';
import OnboardingScreen from './OnboardingScreen';

export default function App() {
  const [isFontsLoaded, setIsFontsLoaded] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        await loadFonts();
        setIsFontsLoaded(true);
      } catch (err) {
        console.error('字体加载失败:', err);
      }
    };
    init();
  }, []);

  // 未加载完成时显示加载指示器
  if (!isFontsLoaded) {
    return <ActivityIndicator size="large" />;
  }

  return <OnboardingScreen />;
}

4. 检查依赖版本兼容性 #

查看package.json中expo和expo-font的版本是否兼容，不同Expo SDK版本对应特定的expo-font版本范围。可以尝试重新安装依赖：

npm install expo-font --save
# 或使用yarn
yarn add expo-font

5. 验证字体文件有效性 #

尝试重新下载Poppins-Medium.ttf字体文件，确保文件未损坏。可以将字体文件在本地系统中打开，确认能正常显示字体样式。

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