使用挂钩加载初始屏幕

Question

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

谢谢！

法案

Answer 1

如果你只了解胡克的useState，这是一个非常简单的改变。这被简单地转换为一个函数，状态值使用hooks解析。如果将AppLoading的示例更改为Hook，则下面的代码如下。

应用加载使用钩子

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