I. Intro

ReactNavigation : 화면전환

II. 설치

ReactNavigation 설치

https://reactnavigation.org/docs/getting-started/
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
cd ios && npx pod-install ios
index.js 파일에 import "react-native-gesture-handler"

StackNavigator 설치

https://reactnavigation.org/docs/hello-react-navigation
npm install @react-navigation/native-stack

III. 화면 Linking

화면 Linking - Stack

스택네비게이터로 랜더링

네비게이션 컨테이너 : 네비게이션 사용을 위해 모든 컴포넌트를 네비게이션 컨테이너 태그에 감싸줘야 함. 네비게이션 구조와 상태를 관리하기 위한 컴포넌트. 따라서 모든 네이게이션 구조는 NavigatonContainer태그 안에 있어야 함.
import { NavigatonContainer } from '@react-navigation/native';

스택네비게이터 사용을 위해 createStackNavigator를 import해야 함.
import { createStackNavigator } from '@react-navigation/stack;

createStackNavigator() : 스크린과 네비게이터라는 두 개의 프로퍼티를 리턴하는 함수. 화면이 랜더링 되는 부분(return)에서 Stack.Navigator, Stack.Screen태그로 사용됨. 전자는 스택네비게이터로 동작하는 부분이라는 것을 알리는 구분자, 후자는 스택네비게이터로 동작하는 화면이 추가될 태그.

사용할 화면을 import하고 Stack.Screen내부에서 사용하면 헤더바와 함께 해당 화면이 나타남.

스택 네비게이터로 화면전환

Home => User 로 이동하기.
App에 네비게이터가 있고, 첫 화면은 Home인 상태(Stack.Navigator에 initialRouteName프롭스를 부여해 초기페이지를 직접 지정할 수도 있음. 아래 NavigationParams 참조)

Home에서 User로 링크하는 버튼. User로 갔을 때 Home으로 돌아오는 상단 백버튼도 자동으로 생성됨.

NavigationParams

화면간 이동에서 데이터 주고받기
App.js : 시작화면은 Home이고 Home에서 User로 넘어갈 때 변수를 넘겨주고 싶은 상태

home.js : 화면을 이동시키면서 두번째 인자로 넘길 변수들을 지정

user.js : 받은 데이터를 저장하고 사용

User에서 initialParams를 사용해서 초기화도 가능

HeaderBar 컨트롤

헤더바 내용은 기본값으로 name의 내용이 들어가나 options-title로 수정가능(네비게이터에서)

setOptions-title을 사용해도 수정가능(컴포넌트에서)

setOptions에서 스타일도 수정가능(컴포넌트에서)

스타일 초기화도 가능. 이 경우 백버튼은 red, 타이틀은 purple로 출력.(네비게이터에서)

스타일을 함수로 선언하고, 호출하여 지정하는것도 가능.