React native 世博会应用程序加载和应用程序引导数据?
有一个新组件React native 世博会应用程序加载和应用程序引导数据?,react-native,expo,React Native,Expo,有一个新组件 从“React”导入React; 从“react native”导入{图像、文本、视图}; 从“expo”导入{Asset,AppLoading}; 导出默认类App扩展React.Component{ 状态={ 伊斯雷迪:错, }; render(){ 如果(!this.state.isReady){ 返回( this.setState({isReady:true}) onError={console.warn} /> ); } 返回( ); } 异步\u cacheResour
从“React”导入React;
从“react native”导入{图像、文本、视图};
从“expo”导入{Asset,AppLoading};
导出默认类App扩展React.Component{
状态={
伊斯雷迪:错,
};
render(){
如果(!this.state.isReady){
返回(
this.setState({isReady:true})
onError={console.warn}
/>
);
}
返回(
);
}
异步\u cacheResourcesAsync(){
常量图像=[
需要(“./assets/images/expo icon.png”),
需要(“./assets/images/slack icon.png”),
];
const cacheImages=images.map((image)=>{
return Asset.fromModule(image).downloadsync();
});
返回承诺。全部(缓存图像)
}
}
然而,这种组件是否打算处理可能失败的加载资源
例如,如果我的应用程序需要后端提供的有关已验证用户的引导数据,我应该使用此组件吗
如果AppLoading适合这种需求,那么您将如何处理用户在没有连接的情况下启动应用程序,而引导数据承诺被拒绝的情况?如何处理重试尝试
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, AppLoading } from 'expo';
export default class App extends React.Component {
state = {
isReady: false,
};
render() {
if (!this.state.isReady) {
return (
<AppLoading
startAsync={this._cacheResourcesAsync}
onFinish={() => this.setState({ isReady: true })}
onError={console.warn}
/>
);
}
return (
<View style={{ flex: 1 }}>
<Image source={require('./assets/images/expo-icon.png')} />
<Image source={require('./assets/images/slack-icon.png')} />
</View>
);
}
async _cacheResourcesAsync() {
const images = [
require('./assets/images/expo-icon.png'),
require('./assets/images/slack-icon.png'),
];
const cacheImages = images.map((image) => {
return Asset.fromModule(image).downloadAsync();
});
return Promise.all(cacheImages)
}
}