setting, appLoading

들어가기
insta-native시작
expo로 만들어서 eject해서 필요한 부분은 cli에서 이어서 만듬

1. setting

1. npm i --global expo-cli
2. expo init schoolgram-native
3. emulator가 실행 안될경우 react-native doctor 그 다음 e

2. appLoading

1. npm install expo-app-loading
2. npm install expo-font
3. npm install expo-asset
4. App.js

  	
import React, { useState } from 'react'
import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import * as Font from 'expo-font'
import { Asset } from 'expo-asset'
import AppLoading from 'expo-app-loading'  ///1. Apploading을 import한다.
import LoggedOutNav from './navigators/LoggedOutNav'
import { NavigationContainer } from '@react-navigation/native'
import { ApolloProvider, useReactiveVar } from '@apollo/client'
import client, { isLoggedInVar, tokenVar } from './apollo'
import LoggedInNav from './navigators/LoggedInNav'

export default function App() {
  const [loading, setLoading] = useState(false)   ///2. useState를 만든다 false로
  const onFinish = () => setLoading(false)   ///3.onFinish 함수를 만듬.
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  const preloadAsset = () => {   ///4. preload해줄 image와 font를 load한다.
  								///preloadAsset이 된 이유는 token을 로드한 후에
                                ///image, font를 load함.
    const fontsToLoad = [Ionicons.font]
    const fontPromises = fontsToLoad.map((font) => Font.loadAsync(font))
    const imagesToLoad = [require('./assets/logo.png')]
    const imagesPromises = imagesToLoad.map((image) => Asset.loadAsync(image))
    return Promise.all([...fontPromises, imagesPromises])
  }
  const preload = async () => {
    const token = await AsyncStorage.getItem('token')
    ///5. AsyncStorage의 token을 load한 다음, isloggedInVar를 true로 만들고
    ///tokenVar에 token을 넣어준다.
    ///login, token부분은 나중에 한번 더 다룰 예정임.
    
    if (token) {
      isLoggedInVar(true)
      tokenVar(token)
    }
    return preloadAsset()
    
    ///6.preload안에 preloadAsset( imgge와 font를 load하는거)을 실행시켜 return한다.
    
  }
  if (loading) {
    return (
      <AppLoading
        startAsync={preload}
        onError={console.warn}
        onFinish={onFinish}
      />
    )
  }
  ///7. Apploading을 import해서 loading 중이면
  ///실행해야될 startAsync, onError, onFinish를 만들어준다.
  
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        {isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}
      </NavigationContainer>
    </ApolloProvider>
  )
}