리액트 내비게이션으로 여러 화면 관리하기

리액트 네이티브를 다루는 기술 책을 공부하면서 정리한 내용입니다.

---

설치 및 적용하기

react-navigation

• 리액트 네이티브 커뮤니키에서 관리
• 사용률이 가장 높은 라이브러리

react-native-navigation

• Wix에서 관리
• 이미 만들어진 네이티브 앱에 리액트 네이티브를 적용하는 경우 더 적합하다.
• 자바스크립트가 아닌 각 플랫폼의 네이티브 코드로 구현되어 있음

새 프로젝트 생성

$ npx react-native init LearnReactNavigation

$ cd LearnReactNavigation
$ yarn add @react-navigation/native

# react-navigation 의존 라이브러리 
$ yarn add react-native-screens react-native-safe-area-countext

$ cd ios
$ pod install

라이브러리 적용하기

• 라이브러리를 적용하기 위해서는 NavigationContainer 컴포넌트로 앱 전체를 감싸줘야 한다.

// App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";

function App() {
  return <NavigationContainer>{/* 내비게이션 설정 */}</NavigationContainer>;
}

export default App;

 

기본적인 사용법

네이티브 스택 내비게이터

• createNativeStackNavigator 함수를 사용하면 Stack 객체를 생성할 수 있다.
  • Stack.Navigator, Stack.Screen 컴포넌트가 있다.
  • Stack.Navigator 컴포넌트는 NavigationContainer 사이에 넣어야 정상 작동한다.

스크린 이동

// HomeScreen.js
( ... )
<Button title="Detail 열기" onPress={() => navigation.navigate('Detail')}
( ... )

// push 를 사용할 수도 있음
<Button title="Detail 열기" onPress={() => navigation.push('Detail')}

라우트 파라미터

• 라우트 파라미터를 설정해 화면을 전환할 때는 navigate 또는 push 함수의 두 번째 인자로 객체를 설정해준다.
• push
  • 스택에 쌓여가면서 화면이 전환된다.
• navigate
  • 스택을 샇지 않고 파라미터만 변경한다.

뒤로 가기

• navigation.pop()를 호출하면 뒤로 가기를 할 수 있다.
• navigation.popToTop() 은 가장 첫 번째 화면으로 이동할 수 있다.

헤더 커스터마이징 하기

• 설정 방법은 두 가지가 있다
  • Stack.Screen의 Props로 설정하는 방법
  • navigation.setOptions 함수를 사용하는 방법
• Stack.Screen의 options의 headerLeft, headerTitle, headerRight 값으로 헤더의 컴포넌트를 변경할 수 있다.

// Stack.Screen 의 Props 설정
<Stack.Screen name="Home" component={HomeScreen} options={{title: '홈'}}/>

// navigation.setOptions 함수 사용 설정
// useEffect로 사용하게 되면 Stack.Screen 의 Props 설정을 덮어쓰게 된다.
useEffect(() => {
        navigation.setOptions({title: '홈'});
}, [navigation]);

 

다양한 내비게이터

드로어 내비게이터

• 드로어 내비게이터 (Drawer Navigator)는 좌측 또는 우측에 사이드바를 만들고 싶을 때 사용한다.
• backBehavior Props
  • initialRoute : 가장 첫 번째 화면을 보여줍니다.
  • order : Drawer.Scrren 컴포넌트를 사용한 순서에 따라 현재 화면의 이전 화면을 보여줍니다.
  • history : 현재 화면을 열기 직전에 봤던 화면을 보여줍니다.
  • none : 뒤로 가기를 수행하지 않습니다.

$ yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated
$ cd ios
$ pod install

하단 탭 내비게이터

• 헤더는 Tab.Navigator에 screenOptions를 설정하거나 각 Tab.Screen에 options를 설정하여 커스터마이징 할 수 있다.

$ yarn add @react-navigation/bottom-tabs react-native-vector-icons
$ cd ios
$ pod install

iOS 아이콘 사용하기

// Info.plist
( ... )
<key>UIAppFonts</key>
<array>
	<string>MaterialIcons.ttf</string>
</array>
( ... )

android 아이콘 사용하기

// build.gradle
project.ext.vectoricons = [
    iconFontNames: ['MaterialIcons.ttf']
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle

 

내비게이션  Hooks

useNavigation

• useNavigation Hook을 사용하면 Screen으로 사용되지 않은 컴포넌트에서도 navigation객체를 사용할 수 있다.

( ... )
import { useNavigation } from '@react-navigation/native';

( ... )

function OpenDetailButton() {
	const navigation = useNavigation();

	( ... )
}

( ... )

 useRoute

• Screen이 아닌 컴포넌트에서 route 객체를 사용할 수 있게 한다.

( ... )
import { useRoute } from '@react-navigation/native'

function IDText() {
	const route = useRoute();
	return <Text>id: {route.params.id}</Text>;
}

( ... )

useFocusEffect

• 화면에 포커스가 잡혔을 때 특정 작업을 할 수 있게 하는 Hook이다.
• 다른 화면을 열었다가 돌아왔을 때 특정 작업을 하고 싶다면 useFocusEffect Hook을 사용하면 된다.