如何在集成React Navigation与Redux的Expo应用中成功加载自定义字体？

我之前也碰到过完全一样的问题——在集成了React Navigation和Redux的Expo应用里，严格按照官方文档做了自定义字体加载，但设置fontFamily后字体完全没变化。结合我的排查和解决经验，给你几个实用的方向：

1. 确认字体的实际内部名称与你使用的一致 #

很多时候字体文件的文件名和它内部注册的fontFamily名称并不完全匹配。比如你用的Pacifico-Regular.ttf，它的实际字体名称可能就是Pacifico，但有些字体（尤其是可变字体）的内部名称会更复杂。

你可以修改App.js里的字体加载函数，打印加载结果来确认：

async _loadFontsAsync() {
  const loadedFonts = await Font.loadAsync(customFonts);
  console.log("Loaded fonts:", loadedFonts); // 查看字体的实际注册名称
  this.setState({ fontsLoaded: true });
}

运行后在控制台查看输出，比如如果显示Pacifico: "Pacifico-Regular"，那你设置fontFamily时就要用"Pacifico-Regular"而不是"Pacifico"。

2. 检查字体文件路径与拼写细节 #

• 确认assets/fonts目录下确实存在对应的字体文件，文件名的大小写、拼写完全和你在customFonts里写的一致（Expo在iOS等系统下对文件名大小写敏感）。
• 像Inter-VariableFont.ttf这类可变字体，部分设备对它的支持可能有问题，可以先换成固定字重的版本（比如Inter-Regular.ttf）测试是否生效。

3. 确保样式优先级正确 #

如果你的组件样式是多个对象合并的，要保证fontFamily的设置在优先级更高的位置。比如：

// 正确写法：把fontFamily放在后面的样式对象里，确保覆盖默认样式
<Text style={[styles.baseText, { fontFamily: 'Pacifico' }]}>测试文本</Text>

避免父组件的默认样式覆盖了你的自定义字体设置。

4. 全局设置自定义字体（可选优化） #

如果想让整个应用统一使用自定义字体，可以封装一个全局的Text组件，不用每个页面手动设置：

// 在App.js里定义全局Text组件
const CustomText = (props) => {
  return <Text {...props} style={[props.style, { fontFamily: 'Pacifico' }]} />;
};

之后在所有页面里用CustomText代替原生的Text组件，就能统一应用字体了。

5. 清除Expo缓存并重启项目 #

缓存问题经常会导致字体加载异常，试试运行：

expo r -c

这个命令会清除Expo的缓存并重启项目，之后重新加载应用看看字体是否生效。

6. 检查SplashScreen的渲染逻辑 #

你的App.js里是等字体加载完成后才渲染Core组件，这部分逻辑是对的，但可以确认下SplashScreen是否没有提前终止加载。不过从代码看，fontsLoaded为false时只显示加载动画，这部分应该没问题。

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