Question

当使用带有挂钩的功能组件时，如何在显示初始屏幕时实现资源加载？带有钩子的apploading和/或闪屏使用的模式是什么？

谢谢！

账单

Answer 1

如果您只了解 Hook的 useState，这是一个非常简单的更改。只需将其转换为函数，然后使用hooks解析状态值。如果将AppLoading的示例更改为Hook，则下面的代码如下。

AppLoading使用挂钩

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启动画面

1 个答案: