[CHERISHPET!] Expo를 이용한 react native 개발 1

1. 완료한 것

- figma로 디자인

- notion 정리

- start page 완성

- start page에서 버튼 누르면 로그인 페이지로 이동

 

2. 코드

페이지에서 페이지간 이동을 하는 방법을 구글링을 통해 찾아봤었는데 class component로 쓰여진 글이 많아서 function component로 바꿔서 사용해보았다. (사실 function component가 훨씬 익숙하다,,)

StartPage.js에서 시작하기 버튼을 누르면 Login.js에서 넘어갈 수 있도록 구현했다.

 

① App.js

- 설치할 것

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

/*App.js*/
import React, { Component } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import StartScreen from "./src/StartPage";
import LoginScreen from "./src/Login";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        // header를 감춘다
          options={{ headerShown: false }}
          name="StartPage"
          component={StartScreen}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="Login"
          component={LoginScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

코드의 순서에 따라 달라진다. 위에 있는 page가 가장 먼저 실행된다.

 

② StartPage.js

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { Image } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function StartPage({ navigation }) {
  return (
    <View>
      <Text>CHERISH PET!</Text>
      <StatusBar style="auto" />
      <View>
        <TouchableOpacity onPress={() => navigation.navigate("Login")}>
          <Text>시작하기</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

간소화한 코드로, 오늘 완성한 코드와는 다르다. TouchableOpacity의 onPress 속성으로 눌렀을 때 "Login" 페이지로 넘어가도록 했다.

 

③ Login.js

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { Image } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function Login({ navigation }) {
  return (
    <View>
      <StatusBar style="auto" />
      <View>
        <Text>CHERISH PET!</Text>
    </View>
  );
}

 

※ 참고한 사이트

https://dlee0129.tistory.com/15