如何摆脱控制台警告:expo-app-loading 已被弃用,取而代之的是 expo-splash-screen?

2024-04-29

我不断收到此错误,内容如下:

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>
  );
}


根据博览会文档,您应该尝试这样的操作,使用世博会启动画面 https://docs.expo.dev/versions/latest/sdk/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.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何摆脱控制台警告:expo-app-loading 已被弃用,取而代之的是 expo-splash-screen? 的相关文章

随机推荐