使用expo-template-native-base启动iOS模拟器报Courier字体未加载错误

该错误是expo-template-native-base默认搭载的旧版本Native Base的兼容性问题：其内置的<Code>代码块组件默认硬编码Courier作为等宽字体，但iOS 13及以上系统已经移除了内置的Courier字体，因此触发字体未加载报错。

方案1：替换默认字体（最快生效，无需额外资源） #

直接在全局Native Base主题配置中覆盖Code组件的默认字体为iOS系统内置的Courier New即可，同时可配置安卓端的回退字体保证多端兼容：

import { extendTheme } from 'native-base';
import { Platform } from 'react-native';

const customTheme = extendTheme({
  components: {
    Code: {
      baseStyle: {
        fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
      },
    },
  },
});

// 入口处将自定义主题传入NativeBaseProvider
<NativeBaseProvider theme={customTheme}>
  {/* 应用原有内容 */}
</NativeBaseProvider>

方案2：手动加载Courier自定义字体 #

如果业务必须使用Courier字体，可自行加载自定义字体包：

• 下载Courier字体文件（.ttf/.otf格式）放到项目assets/fonts目录
• 安装expo-font依赖：npx expo install expo-font
• 应用启动前加载字体，示例代码：

import { useFonts } from 'expo-font';
import { NativeBaseProvider } from 'native-base';

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

  if (!fontsLoaded) return null; // 可替换为自定义加载占位组件

  return (
    <NativeBaseProvider>
      {/* 应用原有内容 */}
    </NativeBaseProvider>
  );
}

方案3：升级Native Base到最新版本 #

该问题已在Native Base后续版本修复，直接升级依赖即可：

npm install native-base@latest
# 或使用yarn
yarn add native-base@latest

升级完成后执行npx expo start --clear清除缓存重启项目即可。

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