Expo SDK45中expo-app-loading弃用错误求助及代码排查

问题核心 #

你遇到的错误提示表明expo-app-loading组件已被弃用，官方推荐使用expo-splash-screen的API替代。需要注意的是，你贴出的Redux action代码本身并未使用expo-app-loading，错误实际来自项目的启动页/入口组件（比如App.js），你需要找到那里的AppLoading使用代码进行替换。

解决步骤 #

1. 移除expo-app-loading依赖

如果你的项目中安装了这个包，先执行卸载：

npm uninstall expo-app-loading
# 或者用yarn
yarn remove expo-app-loading

2. 替换为expo-splash-screen API

找到项目入口文件（通常是App.js），把原来使用AppLoading的逻辑替换为以下代码：

import { SplashScreen } from 'expo-splash-screen';
import { useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit'; // 或你的Redux配置方式
import { fetchRecord } from './path/to/your/actions'; // 导入你的action

// 初始化时阻止启动页自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isReady, setIsReady] = useState(false);
  const store = configureStore(); // 初始化你的Redux store

  useEffect(() => {
    async function initApp() {
      try {
        // 执行你的初始化逻辑，比如调用fetchRecord加载数据
        await store.dispatch(fetchRecord());
        // 这里可以添加其他初始化操作（如加载字体、本地数据等）
      } catch (error) {
        console.error('初始化失败:', error);
      } finally {
        // 初始化完成后隐藏启动页
        await SplashScreen.hideAsync();
        setIsReady(true);
      }
    }

    initApp();
  }, []);

  // 未初始化完成时返回空或自定义加载组件
  if (!isReady) {
    return null;
  }

  // 渲染你的应用主内容
  return (
    <Provider store={store}>
      {/* 你的应用组件 */}
    </Provider>
  );
}

关键说明 #

• SplashScreen.preventAutoHideAsync()：调用此方法阻止启动页自动消失，直到你手动调用SplashScreen.hideAsync()
• 所有初始化操作（数据加载、资源预加载）都放在initApp异步函数中，完成后再隐藏启动页
• 如果初始化过程中出现错误，仍需调用hideAsync()避免启动页一直显示

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