Loading화면 구현 (2)

1. 구현 화면 방식

  ㄱ. 이미지 띄우기

  ㄴ. ActivityIndicator 띄우기 

 

2. 설치파일

  ㄱ. 이미지 방식

     1) 원하는 이미지파일을 프로젝트 내 assets 폴더에 넣어둔다.

     2) 

  ㄴ. ActivityIndicator 방식

     1) react-native로부터 ActivityIndicator를 import해준다.

 

2. 이미지 로딩 사용방법

  ㄱ. Loading.js 컴포넌트 만들기

import React from 'react';
import { ImageBackground, View } from "react-native";
import 치환값 from '../assets/원하는 이미지 파일명.png';

export default function App() {
    return (
        <View>
            <ImageBackground
                source={{ 치환값 }}
                style={{ width: "100%", height: "100%" }}>
            </ImageBackground>
        </View>
    );
}

   ㄴ. 사용할 페이지에 import 해주기

import LoadingPage from "./components/Loading";

   ㄷ. useState 선언해주기 : useState ( 여기 ) true 넣으면 기본상태가 로딩상태로 적용된다.

                                    * 다른 방식으로는 useEffect(( ) => { } 첫줄에 setLoading(true) 를 넣어줘도 된다.

export default function App() {
	...
    const [loading, setLoading] = useState(true); // 로딩 화면 mount시키기 위한 useState

   ㄹ. useEffect 설정해주기

     1) setTimeout(() => { 여기 }, 1000) 에서 여기 부분에 로딩이 해제될 조건을 넣어주고, setLoading이 false가 된다.

     2) 1000 = 1초다 : 프레임에 대한 시간 환산값이다.

     3) .catch문 : 에러시 에러라고 안내해줄 화면이 나오도록 자동설정하는 것

  useEffect(() => {
  
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(() => {

      setLoading(false);
    }, 1000)
    //1000 = 1초를 뜻함

    // .catch(err => { setLoading(false); setError(err); })
  }, []);

   ㅁ. if문으로 error발생시 나올 함수 선언해준다.

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 18 }}>
          {`fetching 에러다 욘석아~
                     네트워크를 확인해보렴!`}
        </Text>
      </View>
    );
  }

 

   ㅂ. return문

       : 삼항연산자를 사용. loading인지 보고, true값이면(=로딩o) <Loading/>페이지가 보인다.

         false값이면(=로딩x) 앱 화면이 나타난다. 

  return (loading ? <LoadingPage /> : (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Text>앱화면이 모두 마운트 되어부러따!</text>
      </SafeAreaView>
    </NavigationContainer>
  ));
}

 

 

3. ActivityIndicator 로딩 사용방법

   ㄱ. useState 선언해주기 : useState ( 여기 ) true 넣으면 기본상태가 로딩상태로 적용된다.

export default function App() {
	...
    const [loading, setLoading] = useState(true); // 로딩 화면 mount시키기 위한 useState

   ㄴ. useEffect 설정해주기

     1) setTimeout(() => { 여기 }, 1000) 에서 여기 부분에 로딩이 해제될 조건을 넣어주고, setLoading이 false가 된다.

     2) 1000 = 1초다 : 프레임에 대한 시간 환산값이다.

     3) .catch문 : 에러시 에러라고 안내해줄 화면이 나오도록 자동설정하는 것

  useEffect(() => {
  
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(() => {

      setLoading(false);
    }, 1000)
    //1000 = 1초를 뜻함

    // .catch(err => { setLoading(false); setError(err); })
  }, []);

   ㄷ. if문으로 로딩시 ActivityIndicator가 나오는 함수를 선언해준다.

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* <View>
        <LoadingPage /> */}
        <ActivityIndicator size="large" color="#5500dc" />
      </View>
    );
  }

   ㄹ. if문으로 error발생시 나올 함수 선언해준다.

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 18 }}>
          {`fetching 에러다 욘석아~
                     네트워크를 확인해보렴!`}
        </Text>
      </View>
    );
  }

   ㅂ. return문

       : 삼항연산자를 사용. loading인지 보고, true값이면(=로딩o) <Loading/>페이지가 보인다.

         false값이면(=로딩x) 앱 화면이 나타난다. 

  return (loading ? <LoadingPage /> : (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Text>앱화면이 모두 마운트 되어부러따!</text>
      </SafeAreaView>
    </NavigationContainer>
  ));
}