带钩子的 apploading 闪屏 [英] apploading splashscreen with hooks

问题描述

在使用带有钩子的功能组件时，如何实现在显示启动画面的同时加载资源?使用带有钩子的应用程序加载和/或闪屏的模式是什么?

How do you achieve loading resources while showing the splash screen when you are using functional components with hooks? What is the pattern in using apploading and/or splashscreen with hooks?

谢谢！

账单

推荐答案

如果你只了解 Hook 的 useState，这是一个非常容易的改变.这只是简单地转换为一个函数，状态值使用 hooks 解析.如果将AppLoading的例子改成Hook，代码如下.

If you only understand Hook's useState, this is a very easy change. This is simply converted into a function, and the state value is resolved using hooks. If you change the example of AppLoading to Hook, the code below is as follows.

AppLoading 使用 Hooks

import React, { useState } from 'react';
import { View ,Image } from "react-native";
import { Asset } from 'expo-asset';
import { AppLoading } from 'expo';

export default function App() {
  const [isReady, setReady] = useState(false);

  const  _cacheResourcesAsync = async () => {
    const images = [require('./assets/snack-icon.png')];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); 
    return Promise.all(cacheImages);
  }

  return (
     isReady === false ? ( <AppLoading
      startAsync={_cacheResourcesAsync}
      onFinish={() => setReady(true)}
      onError={console.warn}
    />) : (<View style={{ flex: 1 }}>
      <Image source={require('./assets/snack-icon.png')} />
    </View>)
  );
}

这篇关于带钩子的 apploading 闪屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！