react-native - 使用钩子加载启动画面
问题描述
当您使用带有钩子的功能组件时,如何在显示启动屏幕的同时加载资源?使用带有钩子的应用程序加载和/或闪屏的模式是什么?
谢谢!
账单
解决方案
如果你只了解Hook's useState
,这是一个非常容易的改变。这只是简单地转换成一个函数,状态值使用hooks
. 如果将示例更改AppLoading
为Hook
,则下面的代码如下。
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>)
);
}
推荐阅读
- java - 两个三角旗一次移动一个像素(赛车)以随机概率冲向终点线?
- android - 计算器崩溃
- c# - 如何获取 windows 10 商店应用的 processId/handle?
- html - Flexbox:不需要的换行符
- c++ - c++已经停止工作静态地图功能
- python - 列表中的可变变量
- python - 如何使用python3中的异常处理从文件夹中删除特定图像
- html - 如何使用css调整元素的背景图像以适应全屏?
- php - Cassandra db PHP 驱动程序,不能使用 ORDER BY 和对分区键的 IN 限制分页查询
- r - Rcpp 中出现 FREESXP 节点错误的原因是什么?