React Native TypeScript中使用expo-font导入字体报错求解决

以下是几种常见的问题原因和对应的解决办法：

1. 未等待字体加载完成就渲染组件 #

useFonts钩子返回的fontsLoaded状态直接反映字体是否加载完成，如果跳过这个判断直接渲染使用自定义字体的组件，就会触发警告。

错误示例：

import { useFonts } from 'expo-font';
import { Text } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-SemiBold': require('../assets/fonts/Poppins-SemiBold.ttf'),
  });

  // 未等待加载完成就渲染
  return <Text style={{ fontFamily: 'Poppins-SemiBold' }}>测试文本</Text>;
}

解决办法：
必须在字体加载完成后再渲染目标组件，加载过程中可以显示占位元素：

import { useFonts } from 'expo-font';
import { ActivityIndicator, Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-SemiBold': require('../assets/fonts/Poppins-SemiBold.ttf'),
  });

  if (!fontsLoaded) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return <Text style={{ fontFamily: 'Poppins-SemiBold' }}>测试文本</Text>;
}

2. fontFamily名称与useFonts定义的键不匹配 #

useFonts中定义的键就是你要使用的fontFamily名称，必须完全匹配，包括大小写、连字符和空格。比如你定义的是'Poppins-SemiBold'，就不能写成'Poppins-semibold'或'Poppins SemiBold'。

3. 路径或文件名拼写错误 #

即使你确认过路径，也再仔细核对一次：

• 相对路径层级是否正确：比如组件在src/screens/Detail.tsx，字体在项目根目录的assets/fonts/下，路径应该是require('../../assets/fonts/Poppins-SemiBold.ttf')
• 文件名是否完全一致：包括后缀.ttf，别把.ttf写成.otf，也别漏写连字符

4. Expo开发服务器缓存问题 #

缓存会导致字体未被正确加载，执行以下操作清除缓存：

• 关闭当前Expo服务器，重新启动并清除缓存：expo start -c
• 卸载并重装手机/模拟器上的Expo Go应用，清除本地缓存

5. TypeScript类型声明缺失（可选） #

如果项目严格使用TypeScript，可能需要添加字体文件的类型声明，避免隐性报错。在项目src目录下创建declarations.d.ts文件：

declare module '*.ttf' {
  const value: string;
  export default value;
}

内容的提问来源于stack exchange，提问作者Guinea Pig Taco