react-navigation (react native routing)

• 리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다.
  @react-navigation/native
  @react-navigation/drawer
  @react-navigation/stack
  @react-navigation/bottom-tabs
  @react-navigation/material-top-tabs
• @react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다.

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

• 네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 수 있도록 해준다.
• NavigationContainer 하위에 Stack, tap, drawer, bottom-tabs 내비게이션을 사용하기 위해서 create${종류}Navigator 매서드로 컴포넌트를 만든다.
• 만든 컴포넌트의 Navigator로 하위에 Screen 컴포넌트를 감싸아 라우팅을 구현한다.

• 예시로 Drawer를 사용하였다.

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

import Test1 from "../components/Test1";
import Test2 from "../components/Test2";

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Test_1" component={Test1} />
            <Drawer.Screen name="Test_2" component={Test2} />
        </Drawer.Navigator>
    );
}

export default DrawerNavigation;

🥭 리액트 네비게이션 네이티브의 의존성 설정을 위한 라이브러리 설치

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

• 라이브러리 설치 후 IOS앱은 npx pod-install ios를 다시 해준다.

🍹 cd ios && pod install && cd ..

• stack을 사용하기 위해서는 react-native-gesture-handler의 설치도 필요하다.

• drawer를 사용하기 위해서는 역시 react-native-gesture-handler의 설치와 함께 react-native-reanimated의 설치도 필요하다.

• 최상위 index.js에서 import 'react-native-gesture-handler'; 를 작성해준다.

• NavigationContainer - 최상위 컴포넌트, 내비게이션의 최상위에 위치해야 한다.
• Navigator는 여러 개의 Screen 컴포넌트를 자식으로 가진다.
• Navigator의 자식으로는 Screen 컴포넌트만 와야 한다.
• Screen 컴포넌트는 name, component 속성을 가지고, name이 스크린의 이름, component는 연결할 화면 컴포넌트를 지정한다.
• Screen은 props로 항상 navigation과 route를 가진다.
• Props.navigation.navigate(“컴포넌트 name”, 건네줄 state 객체); 로 화면을 이동할 수 있다.
• Props.navigation.navigate.goBack() 메서드로 뒤로 이동할 수 있다.
  🌭 https://reactnavigation.org/docs/navigation-prop/ 에서 다른 navigation의 메서드를 확인할 수 있다.
• 스크린에 다른 네비게이션 컴포넌트를 연결하여 중첩해서 네비게이션을 구현할 수 있다.

🌽 라우팅을 하며 값을 전달하기 위해서 다음과 같이 Props를 전달할 수 있다.

• 건네받은 state는 props.route.params에 객체 형태로 건네받을 수 있다.

<Drawer.Screen name="Test8">
	{props => <Test8 {...props} testProps={"Test Props Data Default"}/>}
</Drawer.Screen>

참고 자료 - 공식 문서 : https://reactnavigation.org/docs/getting-started/