使用Expo的AppLoading组件时应用卡在启动闪屏页如何解决

问题原因 #

代码存在两处直接导致闪屏卡住的错误：

• AppLoading组件的必填属性startAsync被误写为startAysnc，拼写错误导致组件无法触发你传入的初始化逻辑，onFinish回调永远不会执行，isReady状态始终为false，页面卡在闪屏页
• 未配置onError回调，若初始化过程抛出异常没有捕获逻辑，也会导致页面无响应卡住
• 额外注意你当前注释的useEffect导入路径错误，是从react内部开发包导入的，后续如果要使用需要修正为从react直接导入

修复方案 #

替换App.js代码为如下版本即可：

import React, { useState, useEffect } from 'react';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';

import AuthNavigator from './app/Navigation/AuthNavigator';
import navigationTheme from './app/Navigation/navigationTheme';
import AppNavigator from './app/Navigation/AppNavigator';

import OfflineNotice from './app/components/OfflineNotice';
import AuthContext from './app/auth/context';
import authStorage from './app/auth/storage';
import jwtDecode from 'jwt-decode';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [user, setUser] = useState();
  const [isReady, setIsReady] = useState(false);

  const restoreToken = async() => { 
    const token = await authStorage.getToken();
    if (!token) return;
    setUser(jwtDecode(token));
  }

  if (!isReady)
    return (
      <AppLoading 
        startAsync={restoreToken}
        onFinish={() => setIsReady(true)}
        onError={(err) => console.log('初始化出错', err)}
      />
    );
  
  console.log("hi");
 
  return (
    <AuthContext.Provider value={{user,setUser}}>
      <OfflineNotice /> 
      <NavigationContainer theme={navigationTheme}>
       {user ? <AppNavigator/> : <AuthNavigator/>}
      </NavigationContainer>  
    </AuthContext.Provider>  
  );
}

补充说明 #

之前改用useEffect可以正常运行，是因为useEffect不需要依赖AppLoading的属性配置，所以没有触发拼写错误的问题，只是初始化逻辑没有和闪屏生命周期绑定，所以加载体验不如AppLoading。

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