如何让启动画面保持更长时间？ （世博会cli）

Question

I've read here several questions, but I did not find a response to my question: basically I need to keep splash screen longer on.

In one of the articles I've seen that there was said to use the AppLoading element, until all the resources are loaded. This is fine by me, so I've created a test, with a timer to see if it really works, but it doesnt.

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

I have a loading screen class, which is called in:

export default function App() {

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

So my idea to have this loading screen or a splash screen on for a time that the resources are loading, in this case i just set a timer to 10 sec. But anyways the splash screen goes very fast away... and yeah after 10 second a do get a console.log 'done', but I'm already on the next screen...

Any idea, what am I doing wrong in this case?

Or maybe I get the idea of AppLoading not correct?

Thanks in advance.

Answer 1

As referred in the documentation you can use Expo's SplashScreen library to keep and hide the splash screen.

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