자바스크립트/React Native
ReactNative - Assets PreLoad 세팅
RightHot
2019. 6. 18. 00:58
ReactNative - Assets PreLoad 세팅
App.js
import React from 'react';
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
state = {
loaded: false
};
handleError = error => console.log(error); // 에러 핸들러
handleLoaded = () => this.setState({ loaded: true }); // 로딩 끝난 뒤
// 성공시 handleLoaded 호출
// 실패시 handleError 호출
loadAssets = async () => {
await Font.loadAsync({
Ionicons.font
});
};
render() {
const { loaded } = this.state;
if (loaded) {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
} else {
return (
<AppLoading
startAsync={this.loadAssets}
onFinish={this.handleLoaded}
onError={this.handleError}
/>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});