์ปคํ”Œ์•ฑ๐Ÿ‘ฉโ€โค๏ธโ€๐Ÿ‘จ [WE'SH] - [3] Tab navigation ์‚ฌ์šฉํ•˜๊ธฐ

eassyยท2020๋…„ 8์›” 21์ผ
0

[WE'SH]Couple-App

๋ชฉ๋ก ๋ณด๊ธฐ
3/6
post-thumbnail

Tab-Navigation ์„ค์น˜ํ•˜๊ธฐ

ํ•˜๋‹จ์— ํƒญ๋ฉ”๋‰ด๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์—ˆ๋‹ค.
๊ทธ๊ฒŒ ๋ฐ”๋กœ @react-navigation/bottom-tabs
์„ค์น˜๋ฅผ ํ•ด์„œ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

์ฐธ๊ณ ํ•˜์˜€์Šต๋‹ˆ๋‹น :)
http://www.devh.kr/2020/React-Navigation-Tab-navigation/

๐Ÿ“Œ ๊ตฌ์กฐํŒŒ์•…

์˜ˆ์ œ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค๊ฐ€๋ณด๋‹ˆ, ์ฝ”๋“œ ์–‘์ด ๋งŽ์•„์ง€๊ธด ํ–ˆ๋Š”๋ฐ
์•„์ง ํ•„์ˆ˜๋กœ ํ•„์š”ํ•œ ๊ตฌ์กฐ๋ฅผ ๋ชฐ๋ผ์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๊ธฐ๋„ ํ•˜๋‹คใ… ใ… 
์šฐ์„ ์€ ๋งŒ๋“ค์–ด๋‚ด๋Š”๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ํ•˜๋Š” ์ค‘์ด๋‹ˆ๊นŒ
์ด๋Ÿฐ๊ฒŒ ํ•„์š”ํ•œ๊ฑฐ๊ตฌ๋‚˜- ๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ๋กœ ํ–ˆ๋‹ค.
๋” ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋„ ๊ณ ๋ฏผํ•ด๋ด์•ผ์ง€ :)

์šฐ์„  ์ „์ฒด์ ์ธ ๊ตฌ์กฐ๋Š”, ๊ธฐ์กด์— ๋‚ด๊ฐ€ ์งฐ์—ˆ๋˜ ๊ตฌ์กฐ์—์„œ
๊ฐ€์žฅ ์ค‘์‹ฌ์ด ๋˜๋Š” App.js๊ฐ€ export๋˜๋Š” ๋ถ€๋ถ„์—์„œ
Stack์„ Tab์œผ๋กœ ๋ฐ”๊พธ๋Š”๊ฒŒ ์ œ์ผ ํฐ ๊ฒƒ ๊ฐ™๋‹ค.

import { createStackNavigator } from '@react-navigation/Stack'
import { createBottomTabNavigator } from 
'@react-navigation/bottom-tabs';
import MainScreen from './components/Main';
import AlbumScreen from './components/Album';
...

const MainStack = createStackNavigator();
function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Main" component={MainScreen}/>
    </MainStack.Navigator>
  );
}

const AlbumStack = createStackNavigator();
function AlbumStackScreen(){
  return (
    <AlbumStack.Navigator>
      <AlbumStack.Screen name="Album" component={AlbumScreen} />
    </AlbumStack.Navigator>
  );
}

...

const Tab = createBottomTabNavigator();

export default function App() {
  return (
   <NavigationContainer>
    <Tab.Navigator>
     <Tab.Screen name="Main" component={MainStackScreen} />
     <Tab.Screen name="Album" component={AlbumStackScreen} />
      ...
    </Tab.Navigator>
   </NavigationContainer>
  );
}

์œ—๋ถ€๋ถ„์—์„œ ๋‚ด๊ฐ€ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” screen ๋ณ„๋กœ component๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์ด์œ ๋Š”
Stack์ด๋ผ๊ณ  ํ™”๋ฉด ์ƒ๋‹จ์— screen์ด๋ฆ„์„ ํ‘œ์‹œํ•ด์ฃผ๋Š” ์˜์—ญ?์„
๋งŒ๋“ค์–ด์ฃผ๋ฉด์„œ ๊ตฌ์กฐ๋ฅผ ์žก์•„์ฃผ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
๊ทธ๋ž˜์„œ ์Šคํฌ๋ฆฐ๋ณ„๋กœ component๋ฅผ ๋งŒ๋“  ํ›„
Tab๋ถ€๋ถ„์—๋Š” ๋งŒ๋“ค์–ด์ค€ component๋ฅผ ๋„ฃ์–ด์ฃผ๊ฒŒ ๋˜๋ฉด

์ด๋ ‡๊ฒŒ ํ•˜๋‹จ์— Tab Navigator๊ฐ€ ์ƒ๊น€!!!!!

๐Ÿ“Œ ํƒญ์— ์•„์ด์ฝ˜ ์ถ”๊ฐ€ํ•˜๊ธฐ

์•„์ง๋„ ์ฐธ ๋งŽ์ด ๋ถ€์กฑํ•˜๊ธฐ์—... ํ•˜๋‚˜ํ•˜๋‚˜ ํ•ด๋‚ด๋Š”๋ฐ์— ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ฆฐ๋‹คใ… ใ… 
๋”ฐ๋กœ ํฌ์ŠคํŒ…์„ ํ•ด์•ผ ํ•  ๋งŒํผ ๋ฆฌ์„œ์น˜์—๋„ ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ ธ๊ณ 
๊ตฌํ˜„ํ•ด ๋‚ด๋Š”๋ฐ์—๋„ ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ ธ์ง€๋งŒ...
ํ•ด๋‚ธ๊ฑด ํ•ด๋‚ธ๊ฑฐ๊ณ , ํฌ์ŠคํŒ…์—๋Š” ๊ฐ„๋žตํžˆ ์ •๋ฆฌํ•ด๋‘๊ธฐ!

์‚ฌ์‹ค ์•„์ง๋„ ๋‚ด๊ฐ€ ๋‹ค์šด ๋ฐ›์€ ์•„์ด์ฝ˜๋“ค์„ ๋„ฃ์–ด๋ณด๊ณ  ์‹ถ๋‹ค.
ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ์„ ๊ตฌํ˜„ํ•ด๋‚ด๋Š”๋ฐ์—๋„ ์—๋Ÿฌ์‚ฌํ•ญ์ด ๋งŽ์•˜๊ธฐ ๋•Œ๋ฌธ์—
์šฐ์„ ! ๊ธฐ๋ณธ์— ์ถฉ์‹คํ•ด๋ณด๊ณ ์ž..! ์ผ๋‹จ ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ ํ•ด๋ณด๊ธฐ ๐Ÿ˜…

์•„์ด์ฝ˜์„ ๋„ฃ๋Š”๋ฐ์—๋„ ๊ทธ๋ƒฅ ๋ก- ๋„ฃ๋Š”๊ฒŒ ์•„๋‹ˆ์—ˆ๋‹ค.
tab์„ ๊ตฌํ˜„ํ•ด์ฃผ๋Š” ์ฝ”๋“œ์— ์•„์ด์ฝ˜์„ ๋„ฃ๊ธฐ ์œ„ํ•ด screenOptions๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ
IonIcons์— ์žˆ๋Š” ์•„์ด์ฝ˜ ๋„ฃ๊ธฐ ์ž‘์—….

<NavigationContainer>
  <Tab.Navigator
    screenOptions={({route}) => ({
     tabBarIcon: ({focused, size, color}) => {
       let iconName;
       if(route.name === "Main") {
         iconName = focused ? "ios-heart" : "ios-heart-empty";
       } else if(route.name === "Album") {
         iconName = focused ? "md-images" : "md-images";
       } else if( ... )
        ...
     return <IonIcons name={iconName} size={size} color={color} />
    }
   })}
    tabBarOptions = {{
     activeTintColor: "#ff5722",
     inactiveTintColor: "#d9c6a5",
    }}

์ด๋Ÿฐ์‹์œผ๋กœ ํด๋ฆญ๋˜์—ˆ์„ ๋•Œ (focused) ๋ณด์—ฌ์งˆ ์•„์ด์ฝ˜๊ณผ ๊ทธ๋ ‡์ง€ ์•Š์„ ๋•Œ ๋ณด์—ฌ์งˆ ์•„์ด์ฝ˜์„
๋”ฐ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.
๋˜ํ•œ ์•„์ด์ฝ˜์ด ํ™œ์„ฑํ™” ๋˜์—ˆ์„ ๋•Œ, ๊ทธ๋ ‡์ง€ ์•Š์„ ๋•Œ์˜ ์ƒ‰์ƒ๋„ ์ •ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋Š”
tabBarOptions๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ƒ‰์ƒ์„ ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค.
๊ทธ๋ ‡๊ฒŒ ํ•ด์„œ ๊ฒฐ๊ณผ๋ฌผ!

๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฉ”์ธ ์Šคํฌ๋ฆฐ์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ๋ฒ•,
์ƒ๋‹จ Stack์„ ์Šคํƒ€์ผ๋ง ํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•ด ์ž‘์„ฑํ•ด๋ณด๊ฒ ๋‹ค.

profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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