React Navigation 중첩 라우팅 구현하기

React Navigation은 대표적인 React Native의 라우팅 라이브러리이다. 모바일 환경의 라우팅을 구현하다보면, 중첩으로 구성된 라우팅이 필요한 경우가 많다. 예를들어, 탭으로 구성된 앱이 있을 때 탭 내부에서 스택으로 라우팅이 필요한 경우가 있다. 많은 경우 탭 내부에서 상세 페이지가 필요한 경우가 있기에 이런 경우에는 탭 위에 스택이 쌓여있는 구조가 된다. 공식 문서를 참고하여 이를 구현하면 다음과 같다. import React from 'react'; import {View, Text} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createStack..

• format_list_bulleted React Native
• · 2023. 4. 16.
• textsms

React Navigation 타입스크립트 사용하기

React Native는 이제 타입스크립트를 사용하는 것이 기본 옵션이 되었다. 그에 따라서, 나 역시 타입스크립트를 사용하는데 react navigation의 타입스크립트 설정이 유난히 번거로웠다. 그래서 다음번의 번거로움을 줄이고자, 내가 사용해본 react navigation의 타입스크립트 설정을 기록으로 남겨두기로 했다. 🍖 코드들은 stack navigator를 기준으로 설명한다. import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {Setting, Home, Login} from "./components"; export type RootStackParamList = { Login: undefined;..

• format_list_bulleted React Native
• · 2023. 2. 23.
• textsms