[ 스파르타 / TIL ] 내일배움캠프 #47

오늘 한 것

---

• 알고리즘 문제 풀기
• React Native Expo로 프로젝트 만들기

 

오늘의 배움

---

React Native Expo로 프로젝트 만들기

---

1. 터미널에 아래 명령어를 입력해 설치를 해준다.

npx create-expo-app RateMovie
cd RateMovie

 

2. EAC에 프로젝트 만들기

eas update:configure

아래와 같은 문구가 뜬다면 Y1

? Would you like to automatically create an EAS project for ***/RateMovie? › (Y/n)

 

https://expo.dev/에 가면 프로젝트가 생성되어있다.

 

3. 배포 명령어

eas update

 

React Navigation

https://reactnavigation.org/

React Navigation | React Navigation

Install

npm install @react-navigation/native

 

 

Expo Install

npx expo install react-native-screens react-native-safe-area-context

 

 

네비게이터 설치

npm install @react-navigation/native-stack

 

네비게이터 활용

---

네비게이터를 활용하기 위해서는 <NavigationContainer>로 감싸줘야 한다.

 

 Stack.Screen 안에 컴포넌트를 만드는 것을 스크린 컴포넌트라고 한다. 
 스크린 컴포넌트는 기본적으로 navigation이라는 Prop을 가지고 있다. 

navigation prop에는 여러 가지 메서드들이 있다. 그중에 페이지 이동을 위해서 navigate라는 메서드를 사용한다. 

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const One = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate('two')}>
      <Text>One</Text>
    </TouchableOpacity>
  );
};

const Two = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate('three')}>
      <Text>Two</Text>
    </TouchableOpacity>
  );
};

const Three = ({ navigation: { goback } }) => {
  return (
    <TouchableOpacity onPress={() => goback()}>
      <Text>Three</Text>
    </TouchableOpacity>
  );
};
export default function App() {
  return (
    <NavigationContainer>
      <StatusBar style='auto' />
      <Stack.Navigator>
        <Stack.Screen name='one' component={One} />
        <Stack.Screen name='two' component={Two} />
        <Stack.Screen name='three' component={Three} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}