React Native使用AppLoading时报Element type is invalid错误如何解决

核心错误原因定位 #

• 报错指向App.js第22行的<AppLoading />组件，错误提示元素类型为undefined，首先确认是AppLoading的导入方式错误：expo-app-loading包采用默认导出规则，你当前使用命名导出的写法（带花括号）导入，自然拿到undefined，触发组件类型校验失败。
• 另外你的代码还存在隐藏问题：fetchFont函数没有返回Font.loadAsync的Promise对象，AppLoading的startAsync参数要求传入返回Promise的函数，不返回的话加载完成后onFinish回调不会正常触发，后续会出现页面卡住的问题。

修复代码 #

1. 修正AppLoading导入语句 #

将原有代码：

import {AppLoading} from 'expo-app-loading';

替换为默认导入写法：

import AppLoading from 'expo-app-loading';

2. 修正fetchFont函数，返回Promise #

将原有fetchFont函数修改为：

const fetchFont = () =>{
  // 必须返回loadAsync的Promise实例，供AppLoading监听加载状态
  return Font.loadAsync({
    'glory':require('./assets/fonts/Glory.ttf')
  });
};

也可以使用箭头函数隐式返回的简化写法：

const fetchFont = () => Font.loadAsync({
  'glory':require('./assets/fonts/Glory.ttf')
});

两处修改完成后重新运行项目即可正常加载自定义字体。

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