如何讓啟動畫面保持更長時間？ （世博會cli）

Question

我在這里閱讀了幾個問題，但我沒有找到對我的問題的回應：基本上我需要讓啟動畫面保持更長時間。

在我看到的一篇文章中，據說使用 AppLoading 元素，直到所有資源都被加載。 這對我來說很好，所以我創建了一個測試，帶有一個計時器來查看它是否真的有效，但它沒有。

export default class LoadingScreen extends React.Component {
  state = {
    isReady: false,
  };

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading 
          startAsync={() => this.requestAsync()}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      ); }
    else {
      return (
        <StartScreen />
      );}
  }

  requestAsync = async() => {
    await Promise.resolve(setTimeout(() => (console.log("done!")), 10000));
  }
}

我有一個加載屏幕 class，它被調用：

export default function App() {

  console.log('Application started');
  
  return (
     <LoadingScreen />
  );
}

所以我的想法是在加載資源的時候打開這個加載屏幕或啟動屏幕，在這種情況下，我只需將計時器設置為 10 秒。 但無論如何，啟動畫面很快就消失了……是的，10 秒后確實得到了一個 console.log '完成'，但我已經在下一個屏幕上……

任何想法，在這種情況下我做錯了什么？

或者，也許我認為 AppLoading 不正確？

提前致謝。

Answer 1

如文檔中所述，您可以使用 Expo 的SplashScreen庫來保留和隱藏啟動屏幕。

import { useEffect } from 'react'
import { Text, SafeAreaView } from 'react-native'
import * as SplashScreen from 'expo-splash-screen'

export default () => {
  useEffect(() => {
    const prepare = async () => {
      // keep splash screen visible
      await SplashScreen.preventAutoHideAsync()

      // pre-load your stuff
      await new Promise(resolve => setTimeout(resolve, 3000))

      // hide splash screen
      await SplashScreen.hideAsync()
    }
    prepare()
  }, [])

  return (
    <SafeAreaView>
      <Text>app is ready</Text>
    </SafeAreaView>
  )
}