React-Navigation

jungeun-pยท2020๋…„ 12์›” 22์ผ
0

React / React-native

๋ชฉ๋ก ๋ณด๊ธฐ
5/5

๐ŸŽกReact Navigation

React์—์„œ๋Š” React-Router-Dom์„ ์ด์šฉํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ์ „ํ™˜ํ•˜์ง€๋งŒ, ํšŒ์‚ฌ์—์„  React-Native์—์„œ๋Š” Navigation ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ React Navigation์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ–ˆ๋‹ค.

RN(Routing)์€ ๋ธŒ๋ผ์šฐ์ €์ฒ˜๋Ÿผ ์ƒ๋‹จ ํƒญ์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค. ํŽ˜์ด์ง€ ๊ฐ„ ์ด๋™์ด ์‰ฝ์ง€ ์•Š์„ ๋ฟ๋”๋Ÿฌ, ๋ธŒ๋ผ์šฐ์ €์ฒ˜๋Ÿผ '๋’ค๋กœ๊ฐ€๊ธฐ'๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ผ์šฐํŒ… ํŒจ์Šค๋ฅผ ๋ชจ๋‘ ๊ธฐ์–ตํ•ด์•ผ ํ•œ๋‹ค. ์ด๋ฅผ ์ง€์›ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ react-navigation-stack์ž…๋‹ˆ๋‹ค. ๋‹ค๋งŒ deepํ•˜๊ฒŒ ๊ตฌ์„ฑ ํ•  ์ˆ˜๋ก ๋’ค๋กœ๊ฐ€๊ธฐ์‹œ ๋ฒ„๋ฒ…์ž„์„ ์ธ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

React-navigation-stack

React Native Navigation stack ์„ค์น˜

setting

react navigation ์„ค์น˜

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

*ios - install the pods (via Cocoapods) to complete the linking

npx pod-install ios

App.js
NaviationContainer ์ปดํฌ๋„ŒํŠธ๋ฅผ import ํ•ด์ค€๋‹ค.

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

  1. CreateStackNavigator
    ์•ฑ์˜ ๊ฐ ํ™”๋ฉด์ด ์ „ํ™˜๋  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋ณธ ํ‹€์„ ์ œ๊ณต

  2. RouteConfigs
    ๊ฐ ํ™”๋ฉด์œผ๋กœ ์•ˆ๋‚ดํ•ด์ฃผ๋Š” ํ‘œ์ง€ํŒ

  3. StackNavigationConfig
    ์ „์ฒด ๊ธธ์— ๋Œ€ํ•œ ์•ˆ๋‚ด๋ฅผ ๋‹ด๋‹น. Modal๋กœ ๋„์šธ์ง€, Screen์œผ๋กœ ๋„์šธ์ง€, user๋ฅผ ์–ด๋”œ ์ œ์ผ ์ฒ˜์Œ ์•ˆ๋‚ด ํ•  ์ง€ ๊ฐ™์€ ์„ค์ •.

  4. navigationOptions
    ์„ธ๋ถ€ ์„ค์ •. (Header, Tab, ๋“ฑ๋“ฑ)

CreateStackNavigator

React-navigation-tab

์ฐธ๊ณ ์ž๋ฃŒ
React Ntaive Tutorial
React Navigation์œผ๋กœ ๋กœ๊ทธ์ธ, ํƒญ ๋„ค๋น„๊ฒŒ์ดํ„ฐ ํ™”๋ฉด ๊ตฌ์„ฑํ•˜๊ธฐ
React-Native Navigation(ํ™”๋ฉด ์ „ํ™˜)

profile
archive of study

0๊ฐœ์˜ ๋Œ“๊ธ€