01 개요
리액트 네이티브 앱에서 화면간 전환 기능을 하는 네비게이션 라이브러리에 대한 내용 전반을 다룬다. 아래 페이지를 참조하여 작성하였다.
https://www.reactnative.express
최종수정일 : 2023.04.18
02 속성 및 종류
02.01 네이티브 네비게이터
iOS : view controller 사용
Android : activities 사용
02.02 속성
통상적인 웹의 무상태(Stateless) 네비게이션과는 다르게, 이전 화면으로 돌아갈 수 있도록 상태를 기억한다.
02.03 종류
stack navigator : 이전 페이지로 돌아갈 수 있도록 방문한 페이지를 스택에 저장하는 네비게이터
pop navigator : 하단에 이동 가능한 스크린 목록을 보여주는 네비게이터
drawer navigator : 숨겨져있다가 활성화 시 이동 가능한 스크린 목록을 보여주는 네비게이터
위 세가지 네비게이터를 가지고 있는 react-navigation 라이브러리가 가장 빈번하게 사용된다.
03 사용
03.01 의존패키지 설치 및 사용 준비
https://reactnavigation.org/docs/getting-started
//install navigation
npm install @react-navigation/native//install dependencies
npm install react-native-screens react-native-safe-area-context
npm install react-native-paper react-native-vector-icons//iOS : pod linking
npx pod-install ios//android : react-native-screens additional step
..android/app/src/main/java/<your package name>/MainActivity.java... import android.os.Bundle; ... public class MainActivity extends ReactActivity { // ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); } // ... }
위와 같이 라이브러리와 의존성 패키지들을 설치한 뒤, 앱 최외곽에서 <NavigationContainer> 컴포넌트로 앱 전체를 감싸주면 된다.
03.02 타입별 네비게이션 설치
npm install @react-navigation/stack
npm install @react-navigation/native-stack
npm install @react-navigation/drawer
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view
stack navigator
네이티브의 구조와 상관없이 스택 네비게이터"처럼" 작동하는 기능을 구현하며, 실제로는 네비게이팅 하지 않고 SPA와 비슷한 방식으로 작동한다.
native-stack navigator
Android 또는 iOS의 네비게이팅 시스템을 이용하여 (웹페이지와 비슷한) 스택 방식의 네비게이터 역할을 한다.
drawer navigator
측면에서 목록 형식으로 나열된 페이지들을 제공하여 해당 페이지들로 네비게이팅 하는 기능을 제공한다.
bottom navigator
모바일 기기 화면의 하단에 이동할 수 있는 페이지를 나열하는 네비게이터를 사용한다.
material-bottom-tabs
라우트를 변경함에 따라 애니메이션이 작동하는 하단 네비게이터(bottom navigator)를 사용한다.
material-top-tabs
라우트를 변경함에 따라 애니메이션이 작동하는 상단 네비게이터를 사용한다.
04 타입스크립트 적용
04.01 Navigator Root parameter 정의
type RootStackParamList = { FirstScreen: { firstParam: string, secondParam: number } SecondScreen: { undefined } ThirdScreen: { firstParam: string } | undefined FourthScreen: { firstParam : 'kimch' | 'cheese' } | undefined };
해당 네비게이터의 루트에서, 각각의 스크린과 그 스크린에 전달될 파라미터의 타입을 정의하여 전체적인 맵을 정의하여 준다.
04.02 해당 스크린과 파라미터를 받는 네비게이터 생성
` const MyStack = createNativeStackNavigator<RootStackParamList>;
`
해당하는 스크린과 파라미터들을 갖는 네비게이터를 생성한다. 이것으로 타입이 정의된 네비게이터가 생성되었다. 이제는 각각의 객체를 타입을 정의해주며 생성해주면 된다.
04.03 스크린 객체 타입 선언
` import { NativeStackScreenProps } from '@react-navigation/native-stack'; type FirstScreenProps = NativeStackScreenProps<RootStackParamList, 'FirstScreen'> //First Screen Implementation function FisrtScreen({route, navigation}: FirstScreenProps): JSX.Element { //content }
`
특정 스크린에 대해서 전달할 타입은 NativeStackScreenProps에 루트 파라미터 리스트와, 해당스크린의 이름을 전달하여 생성할 수 있다. 이렇게 생성한 타입 객체는 route, navigation 프로퍼티를 갖는다.
04.04 화면 이동하기
` import { useNavigator } from "@react-navigation/native"; import { FirstScreenProps } from "./somewhere"; function RandomComponent(): JSX.Element { type FirstScreenNavigationProp = FirstScreenProps['navigation'] const navigation = useNavigation<FirstScreenNavigationProp>(); return ( <View onTouch={() => { navigation.navigate( 'FirstScreen', { firstParam: 'var', secondParam: 123 }) }>
`
Screen 객체들은 기본적으로 route, navigation 프로퍼티를 갖지만, 만약 스크린의 구조를 통해 프로퍼티를 상속받지 않은 객체의 경우, 하위 노드로 계속해서 프로퍼티를 전달하는 것은 매우 불편할 수 있다. 이러한 경우 useNavigator를 사용한다.
05 응용
05.01 아이콘 적용
https://github.com/oblador/react-native-vector-icons#installation
npm install react-native-vector-icons
//ios
copynode_modules/react-native-vector-icons/Fontsto Xcode project//android
with gradle
`import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; //use 'MaterialCommunityIcons' group among many(AntDesign | Entypo | ... ). <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({ color }) => ( <MaterialCommunityIcons name="home" color={color} size={28} style={{bottom:0}} />) }} /> `
