如何在Expo Splashscreen中调用API？

Question

我是React Native的新手，所以我不知道如何在React -Native应用程序中添加api调用。上下文 - 我正在构建一个反应本地的应用EXPO，在应用程序加载上应将API发送到后端以获取订单数据，并且基于该数据，我要么显示屏幕A（已交付）或B（订单在路上）。当应用程序仍然加载时，我想将此API调用添加到SplashScreen中，因此当应用程序加载时，获取API数据并显示屏幕A/B时没有延迟。 我有一个简单的用法函数可以像这样调用API：

const [data, setData] = useState{[]}
useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(url);
        if (response.status.code === 200 ) {
             setData (response.data) // to save data in useState
          }            
        } else if (response.status.code != 200) {
          throw new Error();
        }
      } catch (error) {
        console.log(error);
      }
    };
    getData();
  }, []);

然后在返回中：

if (data.order.delivered) {
    return <ScreenA />
  }
else if (!data.order.delivered) {
 return <ScreenB />

else {return <ScreenC />}

问题是，有时如果API慢，则在Splash屏幕应用程序具有白色屏幕之后，或者可以看到屏幕。在应用程序加载并具有更好的UX时，如何在SplashScreen中调用API？

Answer 1

您可以使用简单的Usestate进行自定义挂钩，并在获取数据后将其放置

const [loading, setLoading] = useState(true)
...
useEffect(() => {
    const getData = async () => {
        try {
            const response = await axios.get(url);
            if (response.status.code === 200 ) {
                setData (response.data)


                // When data is ready you can trigger loading to false
                setLoading(false)
            }
...

，然后，您可以在app.js文件的顶部使用简单的if语句
像这样

   if (!loaded) {
    return <LoadingScreen/>;  // whetever page you want to show here ;
}

Answer 2

您可以使用expo expo-splash-screen实现此目标：

在Mount上调用此挂钩...

import * as SplashScreen from 'expo-splash-screen';

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();
}, []);

您也可以检查expo doc