[React Native study_1] Expo API <App_loading>

App 시작 시 로딩 화면 (Splash) 화면을 구성하는 데 필요한 expo SDK  API 

 

 아래의 Apploading 호출 후 사용한다.

import AppLoading from 'expo-app-loading';

이 때 Appload 내에는 여러가지 pros가 있는데 

startAsync -> 시작 시에 비동기적으로 api등을 받아 올때 사용할 수 있으며 이것이 종료될 때에는

                  ( 맨 처음 api나 그림파일 등을 불러올 때 비동기로 코드를 작성하면 됨)

onFinish 가 실행되게 된다.

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset } from 'expo-asset';
import AppLoading from 'expo-app-loading';

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/snack-icon.png')} />
      </View>
    );
  }

  async _cacheResourcesAsync() {
    const images = [require('./assets/snack-icon.png')];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); 
    return Promise.all(cacheImages);
  }
}