React Native用expo-font加载自定义字体报Element type is invalid错误如何解决

• 核心触发点：Expo SDK 41及以上版本已将AppLoading组件从expo核心包移除，单独拆分为expo-app-loading依赖包。你当前从expo导入AppLoading的方式拿到的是undefined，渲染undefined组件就会触发你收到的"Element type is invalid"报错。
• 其他可优化问题：
  • 调用字体加载的useEffect未添加空依赖数组，会在组件每次重渲染时重复执行，可能引发额外性能问题或异常
  • fontFamily是Text组件专属样式属性，你写在FlatList的style中不会生效

1. 安装匹配你SDK版本的expo-app-loading包，执行命令：
   npx expo install expo-app-loading
2. 修改AppLoading的导入语句，删除原来从expo导入的代码，替换为：
   import AppLoading from 'expo-app-loading';
   注意该组件是默认导入，不要用大括号包裹
3. 给useEffect添加空依赖数组，保证字体加载只在组件首次挂载时执行一次：

useEffect(() => {
  _loadFonts();
}, []);

4. 调整样式中fontFamily的位置，将其从styles.body移到styles.ass中，保证自定义字体生效：

const styles = {
  body: {
    overflow: 'hidden',
  },
  ass: {
    fontSize: 30,
    margin: 10,
    borderBottomWidth: 1,
    borderColor: 'black',
    overflow: 'visible',
    textAlign: 'center',
    fontFamily: 'comic',
  },
  // 其余样式保持不变
};

所有修改完成后重启Expo开发服务，即可解决报错且自定义字体正常生效。

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