React Navigation(네비게이션 라이브러리) , Stack

📍React Navigation

- 화면 간의 전환 관리 가능

 

📍설치

 

npm install @react-navigation/native

 

npm install react-native-screens react-native-safe-area-context

/ios 추가 설치 필요
npx pod-install ios

android)

android/app/src/main/MainActivity.java

 

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

 

import android.os.Bundle;

 

📍네비게이션 종류

-  NavigationContainer 컴포넌트, Navigator 컴포넌트, Screen 컴포넌트

 

 

 

📍 NavigationContainer 컴포넌트

import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* 메인 페이지와 로그인 페이지를 포함한 네비게이션 스택 */}
    </NavigationContainer>
  );
};

export default App;

 

위 코드에서 NavigationContainer는 React Navigation의 컨테이너 역할을 합니다.

안에 메인 페이지와 로그인 페이지를 포함한 네비게이션 스택을 설정하게 됩니다.

 

📍 Screen 컴포넌트

 

화면으로 사용되는 컴포넌트로 name 속성과 component 속성을 지정해주어야 한다.

1. name 속성: 화면 이름
2. component 속성: 화면으로 사용될 컴포넌트를 전달한다. 이 컴포넌트들을 항상 navigation과 route가 props로 전달된다.

// 파일이름이 아닌 export한 컴포넌트 이름!!!

 

 

📍React Stack Navigation란 

- React Navigation 라이브러리의 일부

- 스택 네비게이션은 화면을 스택(Stack) 형태로 관리하는 방식입니다.

예를 들어, 화면 A에서 화면 B를 열면 B가 스택의 맨 위에 쌓이게 되고, 다시 뒤로 가기 버튼을 누르면 B가 닫히고 이전 화면인 A가 다시 나타나는 것입니다. 이렇게 스택에 쌓인 화면들은 사용자가 뒤로 가기를 누를 때마다 역순으로 닫히게 됩니다.

 

📍설치

 

npm install @react-navigation/native @react-navigation/stack

 

 

📍사용방법

 

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MainPage from './MainPage';
import LoginPage from './LoginPage';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="MainPage" component={MainPage} />
        <Stack.Screen name="LoginPage" component={LoginPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

 

const Stack = createNativeStackNavigator();

 

createNativeStackNavigator()   : React Navigation 라이브러리에서 제공하는 함수로, 스택 네비게이션을 생성하는 역할을 합니다.

이 함수를 호출하여 생성된 스택 네비게이션은 Stack 변수에 할당됩니다.

Stack 변수를 생성하는 이유는 Stack.Navigator와 Stack.Screen 컴포넌트를 사용하기 위해서입니다.

 

StackNavigator : 네비게이션 스택을 설정하고, Stack.Screen을 사용하여 각각의 화면을 정의합니다.