React Native iOS端expo-font加载Inter-Black字体失败求助

问题重现 #

iOS设备运行项目时抛出错误：

fontFamily "Inter-Black" is not a system font and has not been loaded through Font.loadAsync

已尝试更换依赖版本、字体文件、字体类型及旧版Font.loadAsync方法，代码对齐Expo官方文档，问题仍未解决。

项目代码 #

import { useCallback} from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Menu from './screens/menu';
import FEMIntro from './screens/femIntro';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

// 保持启动页可见直到资源加载完成
SplashScreen.preventAutoHideAsync();

export default function App() {
  let [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
    //'WorkSansRegular': require('./assets/fonts/WorkSans-Regular.ttf'),
  });

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

  if (!fontsLoaded) {
    return <Text style={{ fontFamily: 'Inter-Black', fontSize: 30, color: '#000' }}>A carregar...</Text>;
  }

  const Stack = createNativeStackNavigator();

  return (
    <View onLayout={onLayoutRootView}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Menu" component={Menu}/>
          <Stack.Screen 
            name="FEM Intro" 
            component={FEMIntro}
          />
        </Stack.Navigator>  
      </NavigationContainer>  
    </View>
  );
}

package.json配置 #

{
  "name": "millervillagetycoon",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.4",
    "@react-navigation/native-stack": "^6.9.10",
    "expo": "~47.0.12",
    "expo-app-loading": "^2.1.1",
    "expo-font": "~11.0.1",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-web": "~0.18.9",
    "react-dom": "18.1.0",
    "@expo/webpack-config": "^0.17.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

解决步骤 #

1. 修复加载提示的字体使用问题 #

当前代码在字体未加载完成时就尝试使用Inter-Black字体显示加载文本，这是触发报错的直接原因。修改为系统字体：

if (!fontsLoaded) {
  return <Text style={{ fontSize: 30, color: '#000' }}>加载中...</Text>;
}

2. 核对字体文件与内部名称 #

• 确认./assets/fonts/Inter-Black.otf路径正确、文件存在，且文件名大小写与代码中完全一致（iOS对文件大小写敏感）。
• 用macOS字体册打开字体文件，查看字体的「全名」——比如实际名称可能是Inter Black而非Inter-Black，需将useFonts中的键替换为这个实际名称：

  let [fontsLoaded] = useFonts({
    'Inter Black': require('./assets/fonts/Inter-Black.otf'),
  });
  

  后续所有使用该字体的地方，fontFamily都要同步改为这个实际名称。

3. 清除缓存重启项目 #

执行命令清除Expo缓存，避免旧缓存干扰：

expo r -c

之后重新启动项目。

4. 验证依赖兼容性 #

Expo 47与expo-font~11.0.1、React Native 0.70.5版本兼容，但可以尝试将expo-font升级到对应Expo 47的最新补丁版本，确保依赖无冲突。

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