맛집 앱 만들기 프로젝트 Part2 최초화면 및 로그인 화면 초기구성

최초화면인 AuthHomeScreen 코드 작성

[matzip/front/src/screens/AuthHomeScreen.tsx] 파일을 작성한다

해당 파일은 로그인화면으로 이동, 회원가입화면으로 이동등의 기능을 갖는 사용자 최초 화면으로 사용예정

import React from 'react';
import {Button, SafeAreaView, StyleSheet, View} from 'react-native';

function AuthHomeScreen() {
  return (
    <SafeAreaView>
      <View>
        <Button title="로그인화면으로 이동"></Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

export default AuthHomeScreen;

• SafeAreaView : 핸드폰 기기에서 최상단 시계있는 부분등 사용하면 겹치는 부분을 제외하고 화면에 그릴 수 있도록 영역 지정하는 기능
• View : 리액트에서 html의 div태그와 비슷한 기능을하는 View가 있다고 생각할 수 있다

로그인화면인 LoginScreen 코드 작성

[matzip/front/src/screens/LoginScreen.tsx] 파일을 작성한다

해당 파일은 로그인화면으로 사용자가 로그인을 하기 위해 표시되는 로그인 페이지이다

해당 페이지에서는 임시로 페이지만 작성해두고 다음에 버튼 기능등을 추가하도록 한다

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

function LoginScreen() {
  return (
    <View>
      <Text>로그인 스크린</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

export default LoginScreen;