React Navigation 사용 방법 React Native Navigation 사용 방법

- 연혁

React Native는 JavaScript와 React를 사용하여 네이티브 모바일 앱을 구축할 수 있습니다. 모바일 앱 개발의 중요한 측면은 네이티브 애플리케이션을 통해 사용자를 인도하고 원활하게 기능을 제공합니다. React Navigation]는 React Native 애플리케이션에서 네이티브 애플리케이션을 구현하는 가장 인기 있는 커뮤니티 중심 라이브러리입니다. 이 가이드는 API를 지원하며 스택, 탭, 서랍 네이레이터를 지원하며 플랫폼 별 제스처 및 전환을 처리합니다. 이 가이드는 React Native 애플리케이션의 모든 흐름과 같은 모든 링크를 포함합니다.

예약 및 문의

React Navigation을 사용하기 전에 React Native 프로젝트가 초기화되었습니다. 신선한 시작하면 React Native CLI 또는 Expo를 사용하십시오. React Navigation은 모두 작동합니다.

Core Packages 설치

npm 또는 원사로 필요한 패키지를 설치하십시오. 핵심 라이브러리 및 주요 의존성은 다음과 같습니다.

npm install @react-navigation/native

React Navigation이 화면 관리 및 안전한 영역 처리에 따라 달라지는 지원 라이브러리를 설치합니다.

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

Expo를 사용하는 경우, 이러한 라이브러리는 이미 포함되어 있습니다. bare React Native 프로젝트의 경우, 기본 모듈을 올바르게 준수하기 위해 공식 문서의 링크 지침을 따르십시오 (React Native 0.60+).

Navigator 설치

React Navigation은 여러 navigators를 제공합니다. ]native stack navigator는 대부분의 사용 사례를 권장하고 있습니다.

npm install @react-navigation/native-stack

bottom 탭과 drawer를 같이 다른 항해자는 따로 설치됩니다:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

핵심 개념

React Navigation은 3개의 주요 건물 블록 주위에 건설됩니다:

NavigationContainer - 가장 바깥의 래퍼는 항법 나무와 상태를 관리합니다.
Navigators – 내비게이션 패턴 정의(stack, tab, 서랍).
Screens - 앱의 보기 또는 페이지를 나타내는 개별 구성 요소.

모든 탐색 설정은 ]에 감싸야 합니다. 이 컨테이너는 일반적으로 앱 구성 요소의 루트에 배치됩니다.

Stack Navigator 설정

스택 네비게이터는 화면의 마지막 첫 번째 아웃 스택을 관리합니다. 기본으로 기본 플랫폼의 전환 애니메이션과 제스처를 사용합니다.

첫째, 필요한 모듈을 가져 오기 :

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

스택 navigator 인스턴스를 만듭니다:

const Stack = createNativeStackNavigator();

앱 구성 요소 내부의 navigator 정의:

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

각 ] prop ( 항법에 사용) and ] prop (반응하는 React 구성 요소).

화면 및 탐색 만들기

화면은 표준 React 구성 요소입니다. 그들은 두 가지 중요한 props를받습니다. ]과 ]]. ]] 객체는 화면 사이에 이동하는 방법을 제공합니다. 아래는 전형적인 홈 화면입니다.

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

세부 화면은 탐색을 필요로하지 않는 한 탐색 prop을 사용하지 않습니다.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

React Navigation은 prop을 통해 여러 가지 방법을 제공합니다:

navigate(name, params)] - 스택에 존재하는 경우, 기존 인스턴스를 재사용하는 스크린으로 이동합니다.
push(name, params)] – 항상 같은 화면이 이미 스택에 있는 경우, 스택에 새로운 화면을 밀어.
goBack() – 스택의 이전 화면으로 이동.
replace(name, params)] – 새로운 화면을 대체하고, 역사에서 현재를 제거.
reset(state) – 주어진 상태 객체에 전체 네비게이션 상태를 재설정합니다.

예를 들어, 세부 화면의 새로운 인스턴스를 밀어하고 매개 변수를 전달합니다.

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

화면 사이 매개변수 통과

데이터는 두 번째 인수를 통해 화면에 전달 될 수 있습니다 또는 ]. 수신 화면은 ]을 통해 그 매개 변수에 액세스.

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

화면 구성 요소에 ]을 사용하여 기본 파라미터 값을 설정:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

각 화면은 헤더, 탭 아이콘, 서랍 라벨 등을 사용자 정의 할 수 있습니다. ] ] 또는 ] navigator에 대한 prop.

공급 능력

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

동적 옵션은 수신 기능을 사용하여 설정할 수 있습니다 :

options={({ route }) => ({ title: route.params.name })}

탭 탐색기

탭 탐색은 최상위 앱 섹션에 공통적입니다. 하단 탭 네비게이터를 설치하십시오.

npm install @react-navigation/bottom-tabs

탭 네비게이터를 만들고 스택과 결합하십시오:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

스택 네비게이터나 부버즈 내부 탭 네비게이터를 나눌 수 있습니다. ] prop을 사용하여 탭 아이콘을 로 지정합니다.

서랍 항해자

서랍 항해자 왼쪽에서 서랍을 슬라이드, 탐색 항목을 공개. 설치 :

npm install @react-navigation/drawer

예제 설정:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

을 사용하여 서랍 프로그래밍을 열고 닫습니다.

네스트 네스트

Complex apps는 종종 스택 네비게이터 내부 탭 네비게이터 (예 : 스택 네비게이터)를 배열합니다. React Navigation 핸들은 우아한 배열입니다. prop은 어떤 화면에 있는 메서드를 호출할 수 있습니다. ]를 사용하여 부모 네비게이터의 메소드에 액세스합니다.

예: 탭 네비게이터 및 설정 화면을 포함하는 스택:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

링크 및 딥 링크

React Navigation은 특정 화면을 열 URL을 처리하는 딥 링크를 지원합니다. ] prop on :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

그런 다음 URL을 처리하십시오. 특정 화면에 링크 된 푸시 알림과 같은 기능을 활성화합니다.

인증 흐름

많은 앱은 인증 상태에 따라 조건부 내비게이션이 필요합니다. 일반적인 패턴은 루트 수준에서 네비게이터를 전환하는 것입니다.

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

또는, 조건부 화면을 가진 단일 스택을 사용합니다. 약속을 유지하거나 최신 상태로 상태를 유지함으로써 깜박임 방지.

성과 및 모범 사례

native stack navigator] (]])를 사용하여 성능과 네이티브 전환을 향상시킵니다.
한 번에 장착 된 화면의 수를 최소화합니다. React Navigation unmounts 숨겨진 화면은 스택 네비게이터에 기본적으로, 하지만 탭 네비게이터에, 당신은 게으른 로딩을 구성할 수 있습니다.
serialization 문제를 피하기 위해 매개 변수를 통해 primitive 데이터 만 전달합니다.
또는 ] 화면 구성 요소에 대한 재 렌더링 자주.
내비게이션 전환 중에 무거운 계산을 피하십시오. ]로 오프로드 작업.
항상 unsaved changes prompts 이벤트를 처리합니다.