React Native Expo无法解析字体文件问题求助

核心问题：文件名后缀拼写错误 #

你的代码里写的字体后缀是.tff，但实际文件夹中的字体文件后缀是.ttf，这是导致路径解析失败的直接原因，先修正这个拼写错误：

// core/hooks/useFonts.js
import * as Font from "expo-font";

export default useFonts = async () =>
  await Font.loadAsync({
    "Montserrat-Regular": require("../../assets/fonts/Montserrat-Regular.ttf"), // 将tff改为ttf
  });

其他需要修正的问题 #

1. App.js中缺少useState导入 #

App组件里使用了useState但未导入，会导致运行报错，补充导入：

// App.js
import { View, useState } from "react-native"; // 新增useState导入
import AppLoading from "expo-app-loading";

import MainNavigator from "./core/navigation/main";
import useFonts from "./core/hooks/useFonts";

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={(err) => console.error(err)} // 建议添加错误日志，方便排查问题
      />
    );
  }
  return (
    <View style={{ flex: 1 }}> {/* 添加flex:1，避免导航器无法全屏显示 */}
      <MainNavigator />
    </View>
  );
}

2. 缓存清理与环境验证 #

如果修正后缀后仍有问题，尝试以下操作：

• 运行npx expo start --clear清除项目缓存
• 删除node_modules和package-lock.json，重新执行npm install后启动项目

验证字体加载状态 #

可以在useFonts钩子中添加日志，确认字体是否加载成功：

// core/hooks/useFonts.js
import * as Font from "expo-font";

export default useFonts = async () => {
  try {
    await Font.loadAsync({
      "Montserrat-Regular": require("../../assets/fonts/Montserrat-Regular.ttf"),
    });
    console.log("Montserrat字体加载成功");
  } catch (err) {
    console.error("字体加载失败:", err);
  }
};

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