如何让闪屏保持更长时间？ （世博会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));
  }
}

我有一个加载屏幕类，调用于：

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

Answer 2

在您的主布局中

 useEffect(() => {
    if (loaded) {
        setTimeout(() => {
            SplashScreen.hideAsync();
        },3000);
    }
}, [loaded]);