带钩子的 apploading splashscreen
apploading splashscreen with hooks
在使用带钩子的功能组件时,如何实现在显示启动画面的同时加载资源?使用带有挂钩的 apploading and/or splashscreen 的模式是什么?
谢谢!
比尔
如果你只了解Hook的 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>)
);
}
在使用带钩子的功能组件时,如何实现在显示启动画面的同时加载资源?使用带有挂钩的 apploading and/or splashscreen 的模式是什么?
谢谢!
比尔
如果你只了解Hook的 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>)
);
}