반응형 React Native/네비게이션6 react navigation 배우기 6부 - 네비게이션 라이프 사이클 https://reactnavigation.org/docs/navigation-lifecycle https://reactnavigation.org/docs/navigation-lifecycle/ reactnavigation.org 1. react navigation의 라이프 사이클 한줄 요약하면 리액트의 컴포넌트 라이프사이클 개념을 고대로 가져와서 react navigation에 적용할 수 있습니다. 예를 들어 봅시다. 스택네비게이터 안에 스크린 A와 B가 있습니다. 먼저 스크린 A를 호출하면 componentDidMount가 호출됩니다. 이후 B를 호출하면 역시 componentDidMount가 호출됩니다. 허나 A의 componentWillUnmout는 호출되지 않습니다. 왜냐하면 A는 여전히 스택에.. 2023. 2. 13. react navigation 배우기 5부 - 네스팅 네비게이터 1. 네스팅 네비게이터란 아래와 같이 네비게이터 안에있는 스크린이 네비게이터를 품고 있으면 이를 네스팅 네비게이터라고 합니다. function Home() { return ( ); } function App() { return ( ); } 위 코드의 구조는 아래와 같이 됩니다 Stack.Navigator □ Home (Tab.Navigator) ＊ Feed (Screen) ＊ Messages (Screen) □ Profile (Screen) □ Settings (Screen) 보시는바와 같이 Home 스크린은 스크린이자 네비게이터 역할을 하고 있습니다. 2. 네스팅 네비게이터의 특징 각각의 네비게이터는 독립된 히스토리 스택을 가집니다 각각의 네비게이터는 독립된 option값을 가집니다 네비게이터 안에 있.. 2023. 2. 13. react navigation 배우기 4부 - 헤더 구성하기 https://reactnavigation.org/docs/headers https://reactnavigation.org/docs/headers/ reactnavigation.org 1. 헤더 제목 설정하기 앞서 배운것처럼 option에 title 항목에 값을 주면 된다 function StackScreen() { return ( ); } 2. 파라미터 내용을 헤더제목으로 설정하기 파라미터를 헤더제목으로 설정하려면 아래와 같이 arrow function을 이용한다 function StackScreen() { return ( ({ title: route.params.name })} /> ); } 3. 옵션값을 바꾸고 리렌더링 하기, setOptions 앞서 3부에서 파라미터 값을 바꾸고 rerenderi.. 2023. 2. 13. react navigation 배우기 3부 - 파라미터 넘겨주기 https://reactnavigation.org/docs/params https://reactnavigation.org/docs/params/ reactnavigation.org 1. 파라미터 념겨주는 방법 앞서 2부에서 페이지를 이동할 때 파라미터를 넘겨주는 법에 대해서 배우기로 약속했었다. 페에지를 이동할 때 파라미터를 넘겨주는 방법은 다음과 같다. navigate나 push의 메소드에 두번째 파라미터로 오브젝트 형태로 전달한다 navigation.navigate('Route네임', { /* 파라미터 자리 */ }) 파라미터를 읽는 스크린은 route.params를 통해 접근한다 공식문서는 params들이 JSON-serializable 하는것이 좋다고 한다. 즉, 경로 및 매개 변수에 함수, 클래.. 2023. 2. 12. react navigation 배우기 2부 - 페이지 이동 https://reactnavigation.org/docs/navigating https://reactnavigation.org/docs/navigating/ reactnavigation.org 1. 페이지 이동하는법 StackNavigator안에 있는 모든 스크린 컴포넌트들은 navigation이라는 prop을 받게 된다. 이를 이용하여 페이지를 navigating 할 수 있다. 아래 예제는 1부에서 보았던 예제를 이용하여 home에서 detail 페이지로 넘어가는 예제이다. 테스트하기 import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@r.. 2023. 2. 12. react navigation 배우기 1부 - 기초지식 https://reactnavigation.org/docs/hello-react-navigation https://reactnavigation.org/docs/hello-react-navigation/ reactnavigation.org 1. 개요 웹에서는 태그로 링크를 타고 다른페이지로 넘어가고, 백버튼을 눌러서 페이지 뒤로가기가 가능하다. 그리고 이는 stack 의 형태로 관리된다. 허나 리액트 네이티브에서는 자체적으로 웹처럼 built-in으로 내장된 stack 관리가 없다. 그래서 나온것이 react navigation이다. 이를 이용하면 웹페이지처럼 페이지를 스택으로 관리 가능하다 2. 설치 아래 커맨드로 설치하자 npm install @react-navigation/native-stack 또는.. 2023. 2. 12. 이전 1 다음 반응형
