ReactNative 네비게이터 일반( Stack Navigator , Native Stack Navigator 차이점)

출처 : https://reactnavigation.org/docs/native-stack-navigator/

 

리엑트 네이티브에서 네비게이션(페이지 이동)을 구현하려면 두가지 선택권이 있다. 하나는 Stack Navigator 이고 나머지 하나는 Native Stack Navigator 이다. 어떤것을 선택할지는 각각 어떤 차이가 있는지 알아보면 결정하기 쉬울 것이다. 

@react-navigation/stack stack 네비게이터 동작 모습

 

Stack Navigator (스택 네비게이터) 

 

Android 와 IOS의 look& fell 에 친숙할 수 있도록 구현되었다. 무슨말이냐면 Stack Navigator 로 구현하면 하나의 코드로 IOS에서는 IOS 의 모습으로 Android에서는 안드로이드의 모습으로 보인다는 뜻이다. 단, 애니메이션은 커스터마이징 할 수 있다. 스택 네비게이터는 자바스크립트로 구현되고, 애니메이션과 제스처를 실행하는 동안 네이티브의 성능만큼 빠르지 않을 수 있다. 많약 성능 문제가 발생한다면 native-stack navigator로 대신 구현하는 것이 좋다고 한다. 

 

설치 방법

 

npm install @react-navigation/stack

 

예제 

 

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Native-Stack Navigator (네이티브 스택 네비게이터 )

IOS 와 Android 의 기본 API를 사용하여 네비게이터가 구현되므로 빌드된 앱과 동일하게 작동하며 동일한 성능을 갖는다. 웹(react-native-web)으로도 제공한다. 다만, Native-stack 은 모든 사용자 환경에 지원되지 않으므로 넓은 사용자에 대해 제공하려면 javascirpt 기반의 stack navigator 로 구현하는 것을 고려해야한다. 

 

 

설치 방법

출처:https://reactnavigation.org/docs/getting-started/

npm install @react-navigation/native-stack

(선택 1) create-react-native-app 으로 생성한 예제라면 추가설치 

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

(선택 2) react-native 만으로 프로젝트를 행성했다면 아래코드로 설치 

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

mac에서 ios 개발을 하고 있다면 추가설치 

npx pod-install ios

            

예제 

 

# myNavigator

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from "./screen/Home";
import Notifications from "./screen/Notifications";

const Stack = createNativeStackNavigator();

function Navigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
    </Stack.Navigator>
  );
}

export default Navigator;


# App.js
import React from "react"
import { NavigationContainer } from "@react-navigation/native";
import Navigator from "./navigator";

export default function App()= ()=>{
return (   
	<NavigationContainer>
       	<Navigator />
    	</NavigationContainer>
    )
    
}