U

react-navigation 라이브러리는 React Native에서 널리 사용되는 라우팅 및 탐색 라이브러리입니다. 앱에서 화면 간 탐색을 처리하는 간단하고 사용하기 쉬운 방법을 제공합니다.

react-navigation 라이브러리에는 세 가지 유형의 내비게이터가 있습니다: 스택 내비게이터, 탭 내비게이터, 드로어 내비게이터입니다. 스택 내비게이터는 스택 기반 접근 방식을 사용하여 화면 사이를 탐색하는 데 사용되며, 탭 내비게이터는 탭 기반 탐색 시스템을 제공합니다. 드로어 내베기에터를 사용하면 슬라이딩 서랍 메뉴를 만들 수 있습니다.

앱에서 react-navigation 라이브러리를 사용하려면 먼저 npm을 사용하여 설치해야 합니다.

npm install @react-navigation/native

그런 다음 사용하려는 특정 내비게이터에 대한 종속성을 설치할 수 있습니다. 예를 들어 스택 내비게이터를 사용하려면 다음을 설치할 수 있습니다

npm install @react-navigation/stack

필요한 패키지를 설치한 후에는 앱에 필요한 구성 요소를 가져올 수 있습니다

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

NavigationContainer 컴포넌트는 react-navigation 라이브러리의 최상위 컴포넌트이며, 이 컴포넌트로 앱을 감싸줘야 합니다. createStackNavigator 함수를 사용하면 스택 내비게이터를 생성할 수 있습니다.

다음은 앱에서 스택 내비게이터를 사용하는 방법에 대한 예시입니다

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

이 예제에서는 두 개의 화면으로 구성된 스택 내비게이터를 만듭니다. 홈 화면과 디테일 화면입니다. NavigationContainer 컴포넌트는 Stack.Navigator 컴포넌트를 감싸고, 각 화면은 Stack.Screen 컴포넌트를 사용하여 정의됩니다.

react-navigation 라이브러리는 헤더를 커스터마이징하고, 탐색 이벤트를 처리하고, 화면 간에 매개변수를 전달하는 옵션도 제공합니다. 이러한 기능에 대한 자세한 내용은 공식 문서를 참조하세요.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0