如何解決 Warning: expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() instead？

Question

我收到以下錯誤

expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync() instead. https://docs.expo.dev/versions/latest/sdk/splash-screen/

我該如何解決這個問題？ 誰能幫我嗎？ 我的代碼如下

import AppLoading from 'expo-app-loading'
import React from 'react'
import { ActivityIndicator, ScrollView } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import * as Sentry from 'sentry-expo'

import { Navigator } from './navigator'

const styles = EStyleSheet.create({
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: '20rem',
  },
})

class Test extends React.Component {
  state = {
    loading: true,
  }

  render = () => {
    if (this.state.loading) {
      return (
        <ScrollView contentContainerStyle={styles.scrollView}>
          <ActivityIndicator size="large" />
          <AppLoading onError={this.handleError} onFinish={this.handleFinish} startAsync={this.startAsync} />
        </ScrollView>
      )
    }
    return <Navigator />
  }

  handleError = (error) => {
    Sentry.captureException(error)
  }

  handleFinish = () => {
    this.setState({
      loading: false,
    })
  }

  startAsync = async () => {
    return Promise.all([ ... ])
  }
}

export { Test }

我已經嘗試解決這個問題如何擺脫控制台警告：不推薦使用 expo-app-loading 取而代之的是 expo-splash-screen？ 但不知道如何做到這一點。任何人都可以幫助我嗎？

Answer 1

您需要使用最新的模塊。

您需要創建啟動畫面圖像，而不是使用 AppLoading

然后您可以使用新的啟動畫面方法來顯示啟動畫面，直到您的資源加載完成。

我建議您閱讀這篇文章，了解最新的 React 和 React Native。 這里還有一篇更具體的 React Native 文章

這是一個例子：

 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'; // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync(); export default function App() { const [appIsReady, setAppIsReady] = useState(false); useEffect(() => { async function prepare() { try { // 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> ); }

在這里，而不是使用你的handleFinish()和

this.setState({
   loading: false,
})

你可以使用類似的東西

setAppIsReady(true);