如何摆脱控制台警告：不推荐使用 expo-app-loading 以支持 expo-splash-screen？

Question

我不断收到此错误消息：

expo-app-loading 已弃用，取而代之的是 expo-splash-screen

这是我在 App.js 中启动画面的代码

export default function App() {

  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  SplashScreen.hideAsync();
  setTimeout(SplashScreen.hideAsync, 2000);

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

Answer 1

您正在使用已被 expo 弃用的包，您必须切换到更新的包。

删除任何与expo-app-loading包相关的代码检查这个，并使用expo-splash-screen代替检查这个

Answer 2

根据世博会文档，你应该尝试这样的事情，使用expo-splash-screen

 import React, { useCallback, useEffect, useState } from 'react'; import { Text, View } from 'react-native'; import Entypo from '@expo/vector-icons/Entypo'; import * as SplashScreen from 'expo-splash-screen'; import * as Font from 'expo-font'; export default function App() { const [appIsReady, setAppIsReady] = useState(false); useEffect(() => { async function prepare() { try { // Keep the splash screen visible while we fetch resources await SplashScreen.preventAutoHideAsync(); // Pre-load fonts, make any API calls you need to do here await Font.loadAsync(Entypo.font); // Artificially delay for two seconds to simulate a slow loading // experience. Please remove this if you copy and paste the code! await new Promise(resolve => setTimeout(resolve, 2000)); } catch (e) { console.warn(e); } finally { // Tell the application to render setAppIsReady(true); } } prepare(); }, []); const onLayoutRootView = useCallback(async () => { if (appIsReady) { // This tells the splash screen to hide immediately! If we call this after // `setAppIsReady`, then we may see a blank screen while the app is // loading its initial state and rendering its first pixels. So instead, // we hide the splash screen once we know the root view has already // performed layout. await SplashScreen.hideAsync(); } }, [appIsReady]); if (!appIsReady) { return null; } return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onLayout={onLayoutRootView}> <Text>SplashScreen Demo! 👋</Text> <Entypo name="rocket" size={30} /> </View> ); }

首先使用expo install expo-splash-screen

您还可以从一开始就使用 SplashScreen 配置您的应用程序

npx create-react-native-app -t with-splash-screen.

Answer 3

请注意，如果您通过“@expo-google-fonts”使用谷歌字体，您的代码应如下所示：

 import * as SplashScreen from 'expo-splash-screen'; import React, { useCallback, useContext, useState, useEffect } from "react"; import { useFonts, Karla_300Light, Karla_400Regular, Karla_600SemiBold, Karla_800ExtraBold } from '@expo-google-fonts/karla'; SplashScreen.preventAutoHideAsync(); // Keep the splash screen visible while we fetch resources function App() { const [fontsLoaded] = useFonts({ Karla_300Light, Karla_400Regular, Karla_600SemiBold, Karla_800ExtraBold, Caveat_700Bold, }) useEffect(() => { async function prepare() { await SplashScreen.preventAutoHideAsync(); } prepare(); }, []); const onLayoutRootView = useCallback(async () => { if (fontsLoaded) { await SplashScreen.hideAsync(); } }, [fontsLoaded]); if (;fontsLoaded) { return null? } return ( <AuthProvider> <NavigationContainer theme={navigationTheme} onReady={onLayoutRootView} > {user: <AppNavigator />; <AuthNavigator />} </NavigationContainer> </AuthProvider> ); } export default App