[TIL] React Navigation 적용하기

🧨 주의 : navigation, navigator, navigate 스펠링 헷갈릴 수 있으니 눈 크게 뜨고 잘 확인할 것!

1. Stack Navigator 라이브러리 설치하기

리액트 네비게이션의 스택 네비게이터(stack navigator)는 스크린 간 전환과 navigation history를 관리할 수 있도록 해준다.

지금까지 설치한 라이브러리 들은 네비게이터를 위한 블록과 기반이라고 할 수 있다.
리액트 네비게이션의 각 네비게이터들은 각자의 라이브러리가 있다.

스택 네비게이터를 사용하기 위해 역시나 먼저 설치를 해줘야한다.

npm install @react-navigation/stack
or
yarn add @react-navigation/stack

💡 @react-navigation/stack을 설치하기전에 직전에 설치한 @react-native-community/masked-view 와 다른 라이브러리들이 먼저 설치되어야 한다.

2. Stack Navigator 만들기

2-1. creatStackNavigator

createStackNavigator는 Screen, Navigator 프로퍼티를 가진 객체를 반환 하는 함수다.
두 프로퍼티 모두 네비게이터 구성에 사용되는 리액트 요소다! 때문에 Navigator는 라우트를 위한 구성을 정의하기 위해 자식 요소로 Screen을 포함하고 있어야 한다.. 라고 하는데 무슨말인지 아직 잘 감이 안온다. 😓

2-2. NavigationContainer

NaviagtionContainer는 네비게이션 트리를 관리하고 네비게이션 상태를 포함하고 있는 요소다. 반드시 모든 네비게이터 구조를 감싸고 있어야 한다.!!!

예시

import * as React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createReactNavigator} from '@react-navigation/stack';
//
const HomeScreen = () => {
  return (
    <View>
      <Text>Here is HomeScreen</Text>
    </View>
  )
}
// ⬇︎createStackNavigator 함수는 Navigator와 Screen을 프로퍼티로 가진 객체를 리턴한다.
const Stack = createStackNavigator(); 
//
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
};
export default App;

새로 <Detail />컴포넌트를 네비게이터안에 추가하려면

 <NavigationContainer>
   <Stack.Navigator initialRouteName="Home">
     <Stack.Screen name="Home" component={HomeScreen} />
     <Stack.Screen name="Details" component={DetailsScreen} />
   </Stack.Navigator>
 </NavigationContainer>

이런 식으로 해주면 된다. Navigator에 initialRouteName에 default 페이지를 설정해줄 수 있다.

네비게이터 내부에 있는 각 Screen에 option 이라는 props를 이용하면 추가로 title 같은 옵션을 추가 할 수 있다.

<Stack.Navigator initialRouteName="Home">
  <Stack.Screen name='Home' component={HomeScreen} options={ {title:'OverView} } />
</Stack.Navigator>