sanguk.dev
작성완료
React Native 화면 전환

React Native 화면 전환

React Native에서 화면 전환을 위해 @react-navigation/native 패키지를 설치하고 사용하는 방법을 설명합니다. Stack, Tab, Drawer 네비게이션을 설정하는 방법과 기본적인 사용법을 코드 예제로 제공합니다.

React Native@react-navigation/native

@react-navigation/native

설치

Stack, Tab

bash
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs

Drawer

bash
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/drawer react-native-gesture-handler react-native-reanimated

사용법

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

const Stack = createNativeStackNavigator();

return (
  <Stack.Navigator initialRouteName="HomeScreen">
    <Stack.Screen
      name="HomeScreen"
      component={HomeScreen}
      options={{title: '홈'}}
    />
  </Stack.Navigator>
)