์ฌ์ค ์ง์ง ์ด์ด์๊ฒ ์ค๋ ๊ฑธ๋ฆฐ ์์
์ด๋ค.
tab navigation
๊ตฌํ์ ์ฑ๊ณตํ ํ ๋ฐ๋ก main screen์ ์คํ์ผ๋ง ํ๊ธฐ ์ํด
์ปคํ์ฌ์ง์ ๋ฐฐ๊ฒฝ์ผ๋ก ๋ฃ์ผ๋ ค๊ณ ํ๋๋ฐ
์ ๊ฑธ... ์๊พธ ๋ชจ๋์ ์ฐพ์ ์๋ง ์๋ค๊ณ ํ๋ใ
ใ
์์
ํ๋๋ฐ ๊ฝค ์ค๋ ๋ฆฌ์์น๋ฅผ ํตํด ๊ตฌํํด๋ด์๋ค.
<Image>
ํ๊ทธ ์ฌ์ฉ๋ฒreact-native์์ ์ด๋ฏธ์ง ํ์ผ์ ๋ฃ๊ธฐ ์ํด์๋
<Image>
ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
resource
๋ผ๋ ์์ฑ์ ์ฌ์ฉํด์ ํ์ผ์ ๊ฒฝ๋ก๋ฅผ ๋ฃ์ด์ฃผ์ด์ผ ํ๋ค.
์ฐ์ ๋ด๊ฐ ์์๋ธ ๋ฐฉ๋ฒ์ผ๋ก๋ ํฌ๊ฒ ๋๊ฐ์ง๊ฐ ์๋๋ฐ,
<Image resource={require('์ด๋ฏธ์ง๊ฒฝ๋ก')} />
<Image resource={{ uri: "์๋ฒ์์ ์ฃผ์" }} />
๋๋ ์ปคํ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์๊ธฐ ๋๋ฌธ์, ์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ์ ์ฐ๊ธฐ๋ก ํ๋ค.
๊ทธ๋ ๊ฒ ์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ ์ ๊ฑธ...?
๊ณ์ํด์ ์๊พธ ์ด๋ค ๋ชจ๋์ด ์๋ค๋๋, ์๋ฌ๊ฐ ๋จ๋๊ฒ์ด๋ค ๐ญ
์ฒ์์ ๋ค๋ฅธ png ํ์ฅ์์ธ ์์ด์ฝ ์ด๋ฏธ์ง๋ค๋ ์๊พธ ์๋ฌ๊ฐ ๋ ์
๋ญ๊ฐ ๋ฌธ์ ์ง ๋ชฐ๋๋๋ฐ.....
์ค๋ ์์
ํ๋ค ๋ณด๋ ๊ฐ์๊ธฐ png ์์ด์ฝ๋ค์ด ์คํฌ๋ฆฐ์ ๋!!!! ๋ ๋ฒ๋ ค์
์ด๊ฑฐ ๋๋์ด ๋ฑ ํ์ฅ์์ ๋ฌธ์ ๊ฐ ์๋ค
๋ผ๋ ์๊ฐ์ด ๋ค์ด์ ํ์ผ๋ณํ์ ํ๋ค.
JPG -> png ๋ก ํ์ฅ์ ๋ณํ์ ํ๋๋ ๋๋์ด ์ฑ๊ณต....ใ
ใ
์ง์ง ์ดํ์ ์ด๋ฏธ์ง ๋ฃ๋๋ฐ์ ์๋์ง๋ฅผ ์๋ชจํด๋ฒ๋ ธ๋๋ ๋๋ฌด๋๋ฌด ํ๋ฌดํ์ง๋ง
ํญ์ ๊ทธ๋ฌ๋ฏ์ด ํผ์ ํด๋๋ค๋๋ฐ์ ์๋ฏธ๋ฅผ ๋์ ๋ ์์ ์.
์ด๊ฒ Stack์ด๋ผ๊ณ ๋ถ๋ฌ๋ ๋๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง...?
navigation์์ ์คํฌ๋ฆฐ์ ๊ตฌ๋ถ์ง๋ ์๋จ์ ์คํฌ๋ฆฐ ์ด๋ฆ๋ถ๋ถ.
๊ทธ ๋ถ๋ถ๋ ์คํ์ผ๋ง์ด ๊ฐ๋ฅํด์
Main ์คํฌ๋ฆฐ๊ณผ ๋๋จธ์ง ๋ค๋ฅธ ์คํฌ๋ฆฐ๋ค์ ์คํ์ผ๋ง์ ๊ตฌ๋ถํด์ ํด๋ณด์๋ค.
์๋จ ์ด๋ฆ ์คํฌ๋ฆฐ ๋ถ๋ถ์๋ ์คํ์ผ๋ง์ด ๊ฐ๋ฅํ๊ธฐ์ ๋ฆฌ์์น๋ฅผ ํด๋ณด๋
screenOptions
๋ผ๋ ์์ฑ์ด ์์๋ค.
์ฌ๊ธฐ์ ํฌํจ๋์ด ์๋๊ฒ๋ค ์ค ์ ์ผ ์ ์ฐ์ด๋ ์ธ๊ฐ์ง๋
headerStyle
: View ํค๋๋ฅผ ๊ฐ์ธ๋ container์ ๋ํ ๋ฐฐ๊ฒฝ์์ ๋ฑheaderTintColor
: ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ๊ณผ ํค๋์คํฌ๋ฆฐ ์ด๋ฆ์ ๊ธ์์์headerTitleStyle
: ํค๋์คํฌ๋ฆฐ ์ด๋ฆ์ ์ฐ์ธ ํ
์คํธ ์คํ์ผ๊ทธ๋์ ๋๋ Main ์คํฌ๋ฆฐ์๋ ์ฌ์ง๊ณผ ๋ ์ง๋ง ์์์ ํ๊ธฐ์,
Main ์คํฌ๋ฆฐ์๋ง ๋ฐ๋ก ๋ฐฐ๊ฒฝ๊ณผ ๊ธ์์์ ํฌ๋ช
์ผ๋ก ์ค์ ํ๋ค.
๋ถ๋ช
์ด๋ค ๊ธ์์๋ header:null
๋ก ํ๋ฉด ์์จ ์ ์๋ค๊ณ ํ๋ ๊ฒ ๊ฐ์๋ฐ
๋ ์ฐพ์๋ด์ผ ๊ผผ์๊ฐ ์๋ ์ค์ ๋ก ์๋ณด์ด๊ฒ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ์ ์์ ๊ฒ ๊ฐ๋ค..ใ
๊ทธ๋ฆฌ๊ณ ์ฐ์ ์คํฌ๋ฆฐ๋ค์ ํ๋ฒ์ ๋ชจ์์ ์ฝ๋๋ก ์์ฑํ์ง ๋ชปํด์
๊ฐ ์คํฌ๋ฆฐ๋ณ๋ก ์ฝ๋๋ฅผ ์ง๋์๊ธฐ ๋๋ฌธ์
์ผ๋จ ๊ฐ๊ฐ ์ฝ๋๋ค์ ์คํ์ผ๋ง์ ์ถ๊ฐํด์ฃผ์๋ค,, (์ง์ ๋ถํด..)
const MainStack = createStackNavigator();
function MainStackScreen() {
return (
<MainStack.Navigator
screenOptions={{
headerStyle={
backgroundColor: "transparent"
},
headerTintColor: "trnasparent"
}}
>
<MainStack.Screen name="Main" component={MainScreen} />
</MainStack.Navigator>
);
}
const AlbumStack = createStackNavigator();
function AlbumStackScreen() {
return (
<AlbumStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#93b5e1"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
},
}}
>
<AlbumStack.Screen name="Album" component={AlbumScreen} />
</AlbumStack.Navigator>
);
}
...
๊ทธ๋์ ๋์จ ๊ฒฐ๊ณผ๋ฌผ์ ์์งค๋ก ์ฌ๋ ค๋ฌ์ผ์ง....
(์์ -2021.05.01)
main screen์ ์์ฃผ ๊ฐ๊ฒฐํ๊ฒ ๋ณด์ฌ์ฃผ๊ณ ์ถ์๊ธฐ์,
์ด๋ฏธ์ง์ ๋๋ฐ์ด ํ์๋ง ๋๋ฉด ๋์ด์...
๋ด๊ฐ tab navigation๊น์ง ์์
์ ๋ค ํด๋์์ผ๋ ๐
moon์๊ฒ ๋๋ฐ์ด ๋ ์ง ๊ตฌํํ๋ ์์
์ ์์ฒญํด๋์๋ค.
๊ทธ ์์
๊น์ง ๋ง๋ฌด๋ฆฌ๊ฐ ๋๋ฉด mainํ์ด์ง๋ ๊ฑฐ์ง ์์ฑ!
๋ค์ ์์
์ ๊ทธ๋๋ง? ์ข ๋ง๋งํด๋ณด์ด๋ ์บ๋ฆฐ๋ ์์
์ผ๋ก ๋์ด๊ฐ์ผ์ง.
์ข ๋ ์ธ๋ถํ๋ ๋ชฉํ๋ฅผ MOON๊ณผ ์๊ธฐํด์ ๊ณํํด๋ณด์์ผ ํ ๊ฒ ๊ฐ๋ค.
ํ์ดํ
ํ์ดํ
๐ฅ