본문 바로가기

728x90

Navigation3

[React Native] useNavigation와 useRoute 이용해서 화면 이동하고 데이터 전달하기 (Move and Pass data between two screens using Hooks) 안녕하세요 Foma 입니다. 평소에 리액트 네이티브에서 navigation을 props로 전달하는 게 너무 불편했는데요. 오늘은 React-Native에서 navigation을 props로 전달하는 것이 아닌, useNavigation과 useRoute를 만들어 줘서 화면을 이동과 함께 데이터를 전달하고 받아보도록 하겠습니다. 바로 시작할게요~ Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install @react-navigation/stack npm install react-native-safe-area-context Navigation Navigation/index.ts 기존 Pro.. 2022. 8. 12.

[React Native] Bottom-Tab 만들어 화면 이동하기 (Bottom-tab-navigator) 안녕하세요 Foma 입니다! 이번엔 저번 Navigation을 이용하여 스크린 이동하기 글에 이어서 Bottom-tab을 만들어 화면을 이동하는 방법에 대해 알아보겠습니다. (해당 코드 기반으로 진행되기 때문에 혹시 안보신 분들은 보고 와주세요!) 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Install Bottom-tabs npm install @react-navigation/bottom-tabs Vector-icons npm install @expo/vector-icons index.tsx import 바텀 탭을 만드는데 필요한 모듈을 import 해줍니다. import { createNativeStackNavigator } from "@react-navigat.. 2022. 6. 16.

[React Native] Navigation으로 화면 이동하기 (Navigation Between Screens) 안녕하세요 Foma 입니다! 오늘은 리액트 네이티브에서 네비게이션을 사용하여 스크린을 이동하는 방법에 대해 알아보도록 하겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Install Native npm install @react-navigation/native @react-navigation/native Native-stack npm install @react-navigation/native @react-navigation/native-stack Safe-area-context expo install react-native-screens react-native-safe-area-context Navigation Initial Setting App.tsx 초기 .. 2022. 6. 16.

이전 1 다음

728x90

티스토리툴바