Loading화면 구현하기

1. 로딩 화면 만들어두기

Loading.js

import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from "react-native";
import { render } from 'react-dom';
import 컴포넌트이름 from '../assets/원하는 이미지 이름.png';

export default class Loading extends React.Component {
    render() {
        return (
            <ImageBackground
                source={{ 컴포넌트이름 }}
                style={{ width: "100%", height: "100%" }}>
            </ImageBackground>
        );
    }
}

 

2. App.js에 useEffect, useState, 삼항연산자로 로딩 페이지 구현

  1) function안에 useState를 선언해준다. 이때 변수는 state와 ready로 두 개 선언해준다.

  2) useEffect : app 실행 시, 가장 먼저 실행하는 것을 선언해 주는 것.

  3) setTimeout :  지연시간 설정

  4) setTimeout 안의 setState(url = "")

      : url = "이 부분에 원하는 json데이터가 있는 url을 입력"

        또는, App.js에 미리 만들어둔 json파일을 import해주고, url = ""를 지운 후,

        import한 json데이터파일을 선언한 이름을 입력해도 됨

App.js

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";
import BotStackScreen from "./components/BotStack";
import { NavigationContainer } from "@react-navigation/native";
import Loading from "./components/Loading";

export default function App() {

  const [state, setState] = useState([])
  const [ready, setReady] = useState(true)

  useEffect(() => {
    setTimeout(() => {
      setState(url = 'https://jsonplaceholder.typicode.com/posts')
      setReady(false)
    }, 1000)
  }, [])

  return (ready ? <Loading /> : (
    <View>
    	<Text>Hi</Text>
    </View>
  ));
}