ํ๋จ์ ํญ๋ฉ๋ด๋ฅผ ์์ฑํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์๋ค.
๊ทธ๊ฒ ๋ฐ๋ก @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์ ์คํ์ผ๋ง ํ๋ ๋ฒ์ ๋ํด ์์ฑํด๋ณด๊ฒ ๋ค.