React Native 강좌 - 6강 카카오 로그인 실습하기 (4)

 

이제 드디어 화면을 구성해 볼 시간입니다!!

 

화면을 구성하기 위해 전 시간 생성했던 src/scene 폴더로 이동합니다.

 

auth 폴더를 새로 생성합니다.

index.ts 파일을 안에 새로 생성합니다

export { LoadingScreen } from './loading.component';

 

이는 C언어의 헤더파일 같은 역할을 수행합니다.

 

이번에는 같은 폴더 내 loading.component.tsx 파일을 생성합니다.

import React, {useState} from 'react';
import {
  ImageBackground,
  StyleSheet,
  View,
  Linking,
} from 'react-native';
import {
  Input,
  InputElement,
  InputProps,
  Button,
  CheckBox,
  Layout,
  LayoutElement,
} from '@ui-kitten/components';
import { checkLoginScreenProps } from '../../navigation/auth.navigation';
import { AppRoute } from '../../navigation/app-routes';


export const LoadingScreen = (props: checkLoginScreenProps): LayoutElement => {
  
  return (
    <React.Fragment>
      <ImageBackground
        style={styles.appBar}
        source={require('../../assets/image-background.jpeg')}
      />
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  appBar: {
    height: 192,
  },
});

 

이 코드는 로딩화면을 출력하는 코드입니다. asset 폴더에 있는 image-background.jpeg 파일을 그대로 출력하도록 코드를 짰습니다.

 

이미지 파일은 제 임의대로 이것을 사용하도록 하겠습니다

다양한 파일을 이름에 맞춰서 asset에 넣어보는것으로 실습하는 것도 괜찮을 것 같습니다.

 

이제 한 번 실행해 보겠습니다.

프로젝트 최상위 폴더로 이동 후 powershell 에서 다음 명령어를 입력합니다.

 

npm run android

 

지금까지 잘 따라와 주셨다면 다음 화면이 출력되는 것을 확인하실수 있습니다.

 

다음 시간에는 버튼을 추가하여 다른 화면으로 이동하는 Navigation 기능에 대하여 실습해 보도록 하겠습니다.