我如何摆脱控制台警告: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-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 2

您正在使用的软件包已被expo弃用，您必须切换到最新的软件包

删除任何与expo-app-loading包相关的代码check this，并使用expo-splash-screen代替check this

Answer 3

注意，如果你是通过'@expo-google-fonts'使用google字体，你的代码应该是这样的:

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