在React Native Expo中导入Google字体时为何报错？

1. 移除未加载完成时的字体引用 #

你的代码在!fontsLoaded分支里直接渲染了使用font-major的Text组件，此时字体还未加载完成，必然触发错误。替换为不需要自定义字体的加载提示：

if(!fontsLoaded){
    return <Text style={{marginTop: 100, fontSize: 100}}>加载中...</Text>
}

2. 确认字体文件路径与存在性 #

• 检查./assets/fonts/NotoSansJP-Thin.ttf路径是否正确，确保文件确实存在于该位置
• 注意文件名大小写（iOS系统对文件名大小写敏感）

3. 验证字体的实际内部名称 #

字体文件的内部名称可能与文件名不一致，这是常见的隐藏坑点：

• iOS：将字体文件拖入Font Book应用，查看显示的官方名称
• Android：安装fonttools工具（pip install fonttools）后，执行命令获取真实名称：

  ttfdump ./assets/fonts/NotoSansJP-Thin.ttf | grep "Full Name"
  

  确认后，可选择用真实名称作为useFonts的键，或保持别名但确保加载逻辑正确。

4. 改用显式Font.loadAsync写法排查 #

如果useFonts仍有问题，换成显式加载写法更容易定位错误：

import React, { useState, useEffect } from 'react'
import { View, Text } from 'react-native'
import { Font } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import Navigation from './Navigation'
import { MaterialCommunityIcons, FontAwesome, Ionicons } from '@expo/vector-icons'

SplashScreen.preventAutoHideAsync()

export default () => {
    const [fontsLoaded, setFontsLoaded] = useState(false)

    useEffect(() => {
        async function loadFonts() {
            try {
                await Font.loadAsync({
                    ...MaterialCommunityIcons.font,
                    ...FontAwesome.font,
                    ...Ionicons.font,
                    'font-major': require('./assets/fonts/NotoSansJP-Thin.ttf'),
                })
                setFontsLoaded(true)
            } catch (error) {
                console.error('字体加载失败:', error)
            }
        }
        loadFonts()
    }, [])

    useEffect(() => {
        async function hideSplash() {
            if (fontsLoaded) {
                await SplashScreen.hideAsync()
            }
        }
        hideSplash()
    }, [fontsLoaded])

    if(!fontsLoaded){
        return <Text style={{marginTop: 100, fontSize: 100}}>加载中...</Text>
    }

    return (
        <View style={{ flex: 1 }}>
            <Text style={{marginTop: 100, fontFamily: 'font-major', fontSize: 100}}>Hey there</Text>
            <Navigation />
        </View>
    )
}

注意：需使用xxx.font获取图标字体的配置对象，部分Expo版本中图标库的导出并非直接的字体配置。

5. 清除缓存重启项目 #

Expo缓存可能导致字体加载异常，执行以下操作：

• 关闭Expo开发者服务器
• 执行expo r -c清除项目缓存
• 重新启动项目

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