如何解决expo-app-loading弃用 改用expo-splash-screen警告

Expo项目开发过程中控制台持续抛出警告：expo-app-loading is deprecated in favour of expo-splash-screen，原有实现依赖已废弃的AppLoading组件完成启动阶段资源加载，需要替换为官方推荐方案消除警告。

1. 依赖调整 #

• 卸载废弃依赖：执行命令 expo remove expo-app-loading
• 确认必要依赖已安装：
  • expo-splash-screen：新版Expo脚手架默认预装，未安装时执行expo install expo-splash-screen
  • expo-font：用于字体资源加载，未安装时执行expo install expo-font

2. 替换App.js启动逻辑 #

原有代码存在三个问题：使用废弃组件、在渲染阶段直接执行副作用方法、重复调用启动屏隐藏接口。替换为以下实现即可：

import { useState, useEffect, useCallback } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from 'expo-font';
// 保留原有其他导入：UserStack、styles等

// 阻止启动屏自动隐藏，直到资源加载完成主动调用隐藏
SplashScreen.preventAutoHideAsync().catch(() => {});

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  // 加载自定义字体，useFonts参数内填入实际项目的字体映射配置
  const [fontsLoaded] = useFonts({
    // 示例：'CustomFont': require('./assets/fonts/CustomFont.ttf')
  });

  useEffect(() => {
    async function prepareAppResources() {
      try {
        // 等待字体等所有前置资源加载完成
        await Promise.all([fontsLoaded]);
        // 保留原有2秒延迟展示启动屏的逻辑，不需要可删除
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (err) {
        console.warn('启动资源加载异常', err);
      } finally {
        setAppIsReady(true);
      }
    }
    prepareAppResources();
  }, [fontsLoaded]);

  // 页面布局完成后再隐藏启动屏，避免白屏闪烁
  const handleRootViewReady = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  // 资源未加载完成时不渲染业务页面，返回空即可
  if (!appIsReady) return null;

  return (
    <NavigationContainer 
      style={styles.container}
      onReady={handleRootViewReady}
    >
      <UserStack/>
    </NavigationContainer>
  );
}

3. 核心改动点 #

• 完全移除已废弃的AppLoading组件引用和使用，直接消除弃用警告
• 基于expo-splash-screen原生能力实现启动屏控制，性能比旧的JS层AppLoading组件更好
• 所有异步逻辑移入useEffect执行，符合React函数组件编码规范，避免渲染阶段重复触发接口调用
• 绑定导航容器的就绪回调，等业务页面首次布局完成后再隐藏启动屏，解决旧逻辑可能出现的白屏闪烁问题
• 清理冗余的重复隐藏启动屏调用，逻辑链路更清晰

内容的提问来源于stack exchange，提问作者Jeandré De Villiers