Expo应用启动报Roboto_medium字体未加载错误，旧方案无效该如何修复？

问题根因 #

报错是由于你使用的Native Base组件库默认依赖Roboto_medium字体，你仅引入了expo-font依赖但没有实际执行字体加载逻辑，组件渲染时无法找到对应字体就会抛出该错误。

可行修复方案 #

方案1：手动加载已下载的Roboto字体（适配你已经下载字体文件的场景）

1. 首先安装依赖，用于在字体加载完成前保持启动页，避免提前渲染组件报错：

npm install expo-app-loading

2. 将你重命名后的Roboto_medium.ttf文件放入项目根目录的assets/fonts文件夹下，没有对应目录直接新建即可。
3. 修改app.js代码为以下内容：

import React, { useState, useEffect } from "react";
import AppLoading from 'expo-app-loading';
import { NativeBaseProvider } from "native-base";
import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";

const loadFonts = async () => {
  await Font.loadAsync({
    Roboto_medium: require('./assets/fonts/Roboto_medium.ttf'),
    // 按需添加Native Base用到的其他默认字体
    Roboto: require('./assets/fonts/Roboto.ttf'),
  });
};

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        await loadFonts();
        setFontsLoaded(true);
      } catch (err) {
        console.warn("字体加载失败", err);
      }
    };
    init();
  }, []);

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  // 必须包裹NativeBaseProvider才是Native Base的正确使用方式
  return (
    <NativeBaseProvider>
      <App1 />
    </NativeBaseProvider>
  );
}

方案2：无需加载自定义字体，覆盖Native Base默认字体配置

如果不想额外引入字体文件，可以通过自定义主题的方式，将默认字体替换为系统自带字体，修改app.js代码如下：

import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";
import App1 from "./src/screens/createCoin.jsx";

// 自定义主题覆盖默认字体配置
const customTheme = extendTheme({
  fontConfig: {
    Roboto: {
      medium: {
        normal: "sans-serif-medium",
      },
    },
  },
  fonts: {
    heading: "Roboto",
    body: "Roboto",
    mono: "Roboto",
  },
});

export default function App() {
  return (
    <NativeBaseProvider theme={customTheme}>
      <App1 />
    </NativeBaseProvider>
  );
}

验证步骤 #

修改完代码后执行npx expo start -c重启Expo服务并清除缓存，再次打开应用即可解决报错。

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