Native Base最新版本在Expo Snack中无法使用求解决方案

我之前在Expo Snack里集成Native Base时也碰到过一模一样的问题，别慌，这是因为新版本的Native Base依赖FontAwesome 5字体，但默认没在你的代码里配置加载。给你几个靠谱的解决办法：

方法1：手动加载FontAwesome5字体 #

Native Base的新版本用到了FontAwesome5图标，所以你需要把这个字体也加入加载列表：

1. 首先在文件顶部导入FontAwesome5：

import { Font } from 'expo';
import { Ionicons, FontAwesome5 } from '@expo/vector-icons';

2. 然后在componentDidMount的字体加载代码里添加FontAwesome5的配置：

async componentDidMount() {
  await Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    ...Ionicons.font,
    ...FontAwesome5.font, // 新增这一行
  });
  // 记得设置state标记字体加载完成，避免渲染出错
  this.setState({ isFontLoaded: true });
}

3. 最后在render方法里判断字体是否加载完成，再渲染Native Base组件：

render() {
  if (!this.state.isFontLoaded) {
    return <Text>Loading...</Text>;
  }
  // 你的Native Base组件渲染代码
}

方法2：降级到不依赖FontAwesome5的Native Base版本 #

如果你不想折腾字体加载，可以把Native Base降级到更早的稳定版本，比如v2.x系列，这些版本不依赖FontAwesome5：

在Snack的package.json里把native-base的版本修改为：

"native-base": "2.15.2"

修改后重新加载Snack，问题就会消失。

方法3：确认Snack依赖完整性 #

有时候Snack可能没有自动引入@expo/vector-icons，你可以在Snack的依赖面板里检查是否有这个包，如果没有，手动添加它（不过一般Expo Snack默认已经包含）。

错误原因说明 #

这个错误出现的核心原因是：Native Base的新版本（v3及以上）大量使用了FontAwesome5的图标组件，但Expo默认不会预加载这个字体，当Native Base尝试调用相关图标时，就会找不到对应的字体模块，从而抛出这个错误。

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