μ»€ν”Œμ•±πŸ‘©β€β€οΈβ€πŸ‘¨ [WE'SH] - [2] 탭메뉴 κ΅¬ν˜„μ‹œλ„

eassyΒ·2020λ…„ 8μ›” 19일
0

[WE'SH]Couple-App

λͺ©λ‘ 보기
2/6
post-thumbnail

탭메뉴 λ§Œλ“€κΈ°

μ΄λ²ˆμ—λŠ” νƒ­ 메뉴에 μžˆλŠ” λ²„νŠΌ 클릭을 톡해 λ‹€λ₯Έ νŽ˜μ΄μ§€λ‘œ λ„˜μ–΄κ°€λŠ” κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κΈ°!
이런 μž‘μ—… ν•˜λ‚˜ν•˜λ‚˜λ₯Ό ν•˜λ©΄μ„œ λ“œλŠ” 생각은,
λ‚΄κ°€ ν•Έλ“œν°μ„ μ‚¬μš©ν•˜λ©΄μ„œ λ‹Ήμ—°ν•˜κ²Œ μ‚¬μš©ν–ˆλ˜ κΈ°λŠ₯듀이
μ°Έ λ³΅μž‘ν•˜κ²Œ λ§Œλ“€μ–΄μ§„κ±°κ΅¬λ‚˜- 싢은 생각을 ν•˜κ²Œ λœλ‹€ πŸ˜–

μš°μ„ , λ‚΄λ§˜λŒ€λ‘œ λ§Œλ“€μ–΄λ³΄κΈ° 😎

repository κΆŒν•œ 곡유(?)

μž‘μ—…μ„ μ‹œμž‘ν•˜κΈ° 전에
ethanκ³Ό μž‘μ—…ν–ˆλ˜ 것 처럼, organization을 λ§Œλ“€μ–΄μ•Ό ν•˜λ‚˜- λ¦¬μ„œμΉ˜λ₯Ό ν•˜λ‹€ λ³΄λ‹ˆ
λ”±νžˆ μ—¬λŸ¬ ν”„λ‘œμ νŠΈλ₯Ό ν•˜μ§€ μ•ŠλŠ” 이상 ν•˜λ‚˜μ˜ μ €μž₯μ†Œλ₯Ό κ³΅μœ ν•΄μ„œ μž‘μ—…ν•΄λ„ 될 것 κ°™μ•„μ„œ
λ‚΄ κΉƒν—ˆλΈŒμ—μ„œ μ €μž₯μ†Œλ₯Ό λ§Œλ“€μ–΄μ„œ κΆŒν•œμ„ moonμ—κ²Œ μ—΄μ–΄μ£Όμ—ˆλ‹€.

λ‚΄κ°€ λ‘œμ»¬μ—μ„œ μž‘μ—…ν•˜λŠ” 것 처럼 moon도 본인 λ‘œμ»¬μ—μ„œ μž‘μ—…ν•΄μ„œ 올리면
λ˜‘κ°™μ΄ 적용이 λ˜λŠ”κ±΄μ§€λŠ” λͺ¨λ₯΄κ² μ§€λ§Œ...
μš°μ„  μ €μž₯μ†ŒλŠ” λ§Œλ“€μ–΄λ‘κ³ !
λ„ˆλ¬΄ μ²˜μŒν•˜λŠ” μž‘μ—…μ΄κΈ° λ•Œλ¬Έμ— test μž‘μ—…μ„ 거친 ν›„ 올렀보기둜..

screen μž‘μ—…μ‹œμž‘.

사싀 μ²˜μŒμ— tab navigation이 μžˆλŠ”μ§€λ„ λͺ¨λ₯Έμ±„ λ‚΄λ§˜λŒ€λ‘œ λ§Œλ“€μ–΄λ³΄κ³ μž
<View>둜 메뉴ꡬ역을 λ§Œλ“€μ–΄μ„œ λ²„νŠΌλ“€μ„ 집어넣은 ν›„
슀크린 ν•˜λ‹¨μœΌλ‘œ λ‚΄λ €μ„œ λ§Œλ“€μ–΄λ³΄μ•˜λ‹€.

πŸ“Œ ν™”λ©΄μ „ν™˜μ„ μœ„ν•œ ꡬ쑰

아직 전체적인 ꡬ쑰λ₯Ό νŒŒμ•…ν•œ 것은 μ•„λ‹ˆμ§€λ§Œ,
App.jsμ—μ„œ 기쑴에 react routeλ₯Ό μž‘μ—…ν–ˆλ˜ 것 처럼 ꡬ쑰λ₯Ό μž‘μ•„μ£ΌλŠ” 것이 ν•„μš”ν–ˆλŠ”λ°
그게 <NavigationContainer>이닀.

이전에 μ„€μΉ˜ν–ˆλ˜ @react-navigation/native을 ν†΅ν•΄μ„œ μ‚¬μš©μ΄ κ°€λŠ₯ν•˜κ³ 
μ΅œμƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œμ„œ <Stack.Navigator>와<Stack.Screen>을
감싸주면 ν™”λ©΄μ „ν™˜μ΄ κ°€λŠ₯해진닀.

λ˜ν•œ Routeλ₯Ό μ‚¬μš©ν–ˆλ˜ 것 처럼 <Stack.Screen> νƒœκ·Έ μ•ˆμ— componentλ₯Ό
μ—°κ²°ν•΄μ£Όλ©΄ ν•΄λ‹Ή ν™”λ©΄μœΌλ‘œ 이동이 κ°€λŠ₯해진닀.

const Stack = createStackNavigator();

export default function App() {
  return (
   <NavigationContainer>
    <Stack.Navigator>
     <Stack.Screen name="WE'SH" component={MainScreen} />
     <Stack.Screen name="Album" component={AlbumScreen} />
     <Stack.Screen name="Calendar" component={CalendarScreen} />
     <Stack.Screen name="WishList" component={WishListScreen} />
     <Stack.Screen name="Letter" component={LetterScreen} />
    </Stack.Navigator>
   </NavigationContainer>
  );
}

μ—¬κΈ°μ„œβ˜πŸ» name은 ν™”λ©΄ 상단에 λœ¨λŠ” Screen의 이름을 μ§€μ •ν•˜λŠ” 것이닀.

πŸ“Œ 이름을 λ§žμΆ°μ£ΌλŠ”κ²Œ μ€‘μš”ν•΄μš”

처음 λ°œκ²¬ν•œ 예제λ₯Ό 아무것도 λͺ¨λ₯΄κ³  λ¬΄μž‘μ • λ”°λΌμ„œ μž…λ ₯ν•œ ν›„
ν•˜λ‚˜ν•˜λ‚˜μ”© μ›ν•˜λŠ” λ‹¨μ–΄λ‘œ λ°”κΏ”λ³΄λ©΄μ„œ μ•Œκ²Œλœ 것은,
navigation을 μ΄μš©ν•˜λ €λ©΄, ν•΄λ‹Ή 이름을 잘 λ§žμΆ°μ€˜μ•Ό 였λ₯˜κ°€ μ•ˆλ‚œλ‹€λŠ”κ±Έ μ•Œκ²Œ λ˜μ—ˆλ‹€.

μœ„μ—μ„œ μž…λ ₯ν•œ <NavigationContainer>의 screenμ—μ„œ μ§€μ •ν•œ 이름과,
λ²„νŠΌμ— λ„£λŠ” onPressμ—μ„œμ˜ name이 πŸ”½
onPress={() => navigation.navigate("name")}
μΌμΉ˜ν•΄μ•Ό 였λ₯˜κ°€ λ‚˜μ§€ μ•ŠλŠ”λ‹€.

πŸ“Œ μ‹œν–‰μ°©μ˜€

μ΄λ ‡κ²ŒκΉŒμ§€ λ§Œλ“€κ³  λ‚˜μ„œμ•Ό 방법이 ν‹€λ Έλ‹€λŠ”κ±Έ κΉ¨λ‹«κ²Œ λ˜μ—ˆλ‹€.
μ™œλƒλ©΄,

  • κ·Έλƒ₯ MainScreenμ—λ§Œ λ…λ¦½μ μœΌλ‘œ λ§Œλ“€μ–΄μ„œ 넣은 것이기 λ•Œλ¬Έμ—
    λ²„νŠΌμ„ ν΄λ¦­ν•΄μ„œ ν•΄λ‹Ή 슀크린으둜 λ“€μ–΄κ°€λ©΄ 메뉴바가 μ—†μ–΄μ§€κ²Œ λ˜μ—ˆλ‹€.
  • μƒκ°ν•΄λ³΄λ‹ˆ 메뉴바에 MainScreen으둜 이동할 수 μžˆλŠ” λ²„νŠΌλ„ ν•„μš”ν–ˆλ‹€.
  • 배경색상도 전체 screen에 적용되게 ν•  수 μžˆλ„λ‘ ν•΄μ•Όν–ˆλ‹€.

Tab Navigationμ΄λΌλŠ” 것이 μžˆμ—ˆκ³ ,
screen ν•˜λ‹¨μ— 탭메뉴λ₯Ό 넣을 수 μžˆλŠ” λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μžˆλ‹€λŠ”κ±Έ μ•Œκ²Œ λ˜μ—ˆλ‹€.
κ·Έλž˜μ„œ μš°μ„  이런 것듀이 μ–΄λ–»κ²Œ μž‘μš©ν•˜λŠ”μ§€ λ°°μ› λ‹€ 치고,
μƒˆλ‘œμ΄ @react-navigation/bottom-tabsλ₯Ό μ„€μΉ˜ν•΄μ„œ
ν•˜λ‹¨μ— 탭메뉴λ₯Ό 넣어보도둝 해야지!

profile
μ‰½κ²Œ μ‚¬λŠ”κ±΄ μž¬λ―Έκ°€ μ—†λ”κ΅°μš”, μƒˆλ‘œ μ‹œμž‘ν•©λ‹ˆλ‹€πŸ€“

0개의 λŒ“κΈ€