Expo导入TTF字体报错：无法赋值给只读属性'useFonts'

错误原因分析 #

• 「Cannot find name 'useFonts'」：你要么没正确导入expo-font官方提供的useFonts钩子，要么错误地尝试自行创建这个钩子——useFonts是expo封装好的内置钩子，不需要自己定义。
• 「Cannot assign to 'useFonts' because it is a read-only property」：你大概率尝试给从expo-font导入的useFonts变量赋值，但它是只读的导出成员，不允许修改。

正确实现步骤 #

1. 安装必要依赖 #

先确保安装expo-font和启动加载组件依赖：

npx expo install expo-font expo-app-loading

2. 正确导入并使用useFonts #

直接使用expo-font提供的useFonts，不要自行定义或修改它，示例代码如下（App.tsx）：

import React from 'react';
import { Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

export default function App() {
  // 传入字体文件映射，直接调用官方useFonts钩子
  const [fontsLoaded] = useFonts({
    'Custom-Regular': require('./assets/fonts/CustomFont-Regular.ttf'),
    'Custom-Bold': require('./assets/fonts/CustomFont-Bold.ttf'),
  });

  // 字体未加载完成时显示启动页
  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Custom-Regular', fontSize: 24 }}>普通样式文本</Text>
      <Text style={{ fontFamily: 'Custom-Bold', fontSize: 24 }}>加粗样式文本</Text>
    </View>
  );
}

3. 避坑提示 #

• 绝对不要写const useFonts = ...这类代码，会覆盖官方导入的钩子，触发只读错误。
• 确认字体文件路径正确，路径错误会导致字体加载失败但不会抛出直接报错。
• 若使用Expo SDK 44+，也可以用expo-splash-screen替代expo-app-loading，但useFonts的调用逻辑完全一致。

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