[React Navigation] 기본 사용법

React Navigation 기본 사용

1. 홈페이지 접속

Read Docs ->

Installation, Installing dependencies into an Expo managed project 설치

npm install @react-navigation/native

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

2. Navigator 설치

각 navigator 사용을 위해 각각의 설치가 필요하다.

ex) Native Stack Navigator

yarn add @react-navigation/native-stack

ex) Bottom Tabs Navigator

yarn add @react-navigation/bottom-tabs

3. NavigationContainer

Navigation 사용을 위해 최외각 태그에 감싸주어야 한다.

stack.navigator 사용시 예제

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>  
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}