Expo React Native添加图标时持续报isLoaded未定义的TypeError错误求助

这个错误大多是因为Expo项目图标库版本不兼容、混用原生与Expo官方图标库，或者未正确预加载图标字体导致的，以下是针对性解决方案：

1. 统一使用Expo官方图标库并预加载字体 #

Expo项目优先用@expo/vector-icons，它无需原生配置，适配性更好：

• 先卸载冲突的原生图标库（如果已安装）：

  npm uninstall react-native-vector-icons
  # 或用yarn
  yarn remove react-native-vector-icons
  

• 用Expo官方命令安装适配版本的图标库：

  expo install @expo/vector-icons
  

• 在App中预加载图标字体，确保组件渲染前字体已加载完成：

  import React, { useState, useEffect } from 'react';
  import { View, Text } from 'react-native';
  import { Ionicons } from '@expo/vector-icons';
  import * as Font from 'expo-font';
  import * as SplashScreen from 'expo-splash-screen';
  
  // 阻止启动屏自动隐藏，直到字体加载完成
  SplashScreen.preventAutoHideAsync();
  
  const App = () => {
    const [fontsLoaded, setFontsLoaded] = useState(false);
  
    useEffect(() => {
      async function loadFonts() {
        await Font.loadAsync({
          ...Ionicons.font,
          // 若使用其他图标库，比如FontAwesome，添加对应字体
          // ...FontAwesome.font,
        });
        setFontsLoaded(true);
        await SplashScreen.hideAsync();
      }
  
      loadFonts();
    }, []);
  
    if (!fontsLoaded) {
      return null; // 或自定义加载组件
    }
  
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is a test</Text>
        <Ionicons name="md-checkmark-circle" size={32} color="green" />
      </View>
    );
  };
  
  export default App;
  

2. 检查SDK版本兼容性 #

确保@expo/vector-icons版本与你的Expo SDK版本匹配，使用expo install命令会自动拉取适配版本，避免手动安装导致的版本冲突。

3. 清除缓存并重启项目 #

缓存问题也可能引发该错误，执行以下操作：

# 清除Expo缓存并重启项目
expo r -c

4. 禁止混用图标库 #

Expo项目不要同时安装@expo/vector-icons和react-native-vector-icons，后者需要原生工程配置，而Expo项目默认不支持直接修改原生代码，混用会导致冲突。

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