์ปคํ”Œ์•ฑ๐Ÿ‘ฉโ€โค๏ธโ€๐Ÿ‘จ [WE'SH] - [4] Main screen ์Šคํƒ€์ผ๋ง

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

[WE'SH]Couple-App

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

Image ๋„ฃ๊ธฐ ๐ŸŒ„

์‚ฌ์‹ค ์ง„์งœ ์–ด์ด์—†๊ฒŒ ์˜ค๋ž˜ ๊ฑธ๋ฆฐ ์ž‘์—…์ด๋‹ค.
tab navigation๊ตฌํ˜„์„ ์„ฑ๊ณตํ•œ ํ›„ ๋ฐ”๋กœ main screen์„ ์Šคํƒ€์ผ๋ง ํ•˜๊ธฐ ์œ„ํ•ด
์ปคํ”Œ์‚ฌ์ง„์„ ๋ฐฐ๊ฒฝ์œผ๋กœ ๋„ฃ์œผ๋ ค๊ณ  ํ•˜๋Š”๋ฐ
์™ ๊ฑธ... ์ž๊พธ ๋ชจ๋“ˆ์„ ์ฐพ์„ ์ˆ˜๋งŒ ์—†๋‹ค๊ณ  ํ•˜๋‹ˆใ… ใ… 
์ž‘์—…ํ•˜๋Š”๋ฐ ๊ฝค ์˜ค๋žœ ๋ฆฌ์„œ์น˜๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•ด๋‚ด์—ˆ๋‹ค.

๐Ÿ“Œ <Image> ํƒœ๊ทธ ์‚ฌ์šฉ๋ฒ•

react-native์—์„œ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ๋„ฃ๊ธฐ ์œ„ํ•ด์„œ๋Š”
<Image>ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋‹ค.
resource๋ผ๋Š” ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ ํŒŒ์ผ์˜ ๊ฒฝ๋กœ๋ฅผ ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.
์šฐ์„  ๋‚ด๊ฐ€ ์•Œ์•„๋‚ธ ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ํฌ๊ฒŒ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ,

  • ๋กœ์ปฌ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ : <Image resource={require('์ด๋ฏธ์ง€๊ฒฝ๋กœ')} />
  • ์„œ๋ฒ„์ƒ์— ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ
    : <Image resource={{ uri: "์„œ๋ฒ„์ƒ์˜ ์ฃผ์†Œ" }} />

๋‚˜๋Š” ์ปคํ”Œ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ฒซ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ์“ฐ๊ธฐ๋กœ ํ–ˆ๋‹ค.
๊ทธ๋ ‡๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๋Š”๋ฐ ์™ ๊ฑธ...?

๊ณ„์†ํ•ด์„œ ์ž๊พธ ์–ด๋–ค ๋ชจ๋“ˆ์ด ์—†๋‹ค๋Š๋‹ˆ, ์—๋Ÿฌ๊ฐ€ ๋œจ๋Š”๊ฒƒ์ด๋‹ค ๐Ÿ˜ญ
์ฒ˜์Œ์—” ๋‹ค๋ฅธ png ํ™•์žฅ์ž์ธ ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€๋“ค๋„ ์ž๊พธ ์—๋Ÿฌ๊ฐ€ ๋– ์„œ
๋ญ๊ฐ€ ๋ฌธ์  ์ง€ ๋ชฐ๋ž๋Š”๋ฐ.....

์˜ค๋Š˜ ์ž‘์—…ํ•˜๋‹ค ๋ณด๋‹ˆ ๊ฐ‘์ž๊ธฐ png ์•„์ด์ฝ˜๋“ค์ด ์Šคํฌ๋ฆฐ์— ๋™‡!!!! ๋– ๋ฒ„๋ ค์„œ
์ด๊ฑฐ ๋Š๋‚Œ์ด ๋”ฑ ํ™•์žฅ์ž์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋„ค๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ ํŒŒ์ผ๋ณ€ํ™˜์„ ํ–ˆ๋‹ค.
JPG -> png ๋กœ ํ™•์žฅ์ž ๋ณ€ํ™˜์„ ํ–ˆ๋”๋‹ˆ ๋“œ๋””์–ด ์„ฑ๊ณต....ใ… ใ… 
์ง„์งœ ์ดํ‹€์„ ์ด๋ฏธ์ง€ ๋„ฃ๋Š”๋ฐ์— ์—๋„ˆ์ง€๋ฅผ ์†Œ๋ชจํ•ด๋ฒ„๋ ธ๋”๋‹ˆ ๋„ˆ๋ฌด๋„ˆ๋ฌด ํ—ˆ๋ฌดํ•˜์ง€๋งŒ
ํ•ญ์ƒ ๊ทธ๋žฌ๋“ฏ์ด ํ˜ผ์ž ํ•ด๋ƒˆ๋‹ค๋Š”๋ฐ์— ์˜๋ฏธ๋ฅผ ๋‘์ž ๋‚˜ ์ž์‹ ์•„.


Stack ์Šคํƒ€์ผ๋ง ์‹œ๋„

์ด๊ฒŒ Stack์ด๋ผ๊ณ  ๋ถˆ๋Ÿฌ๋„ ๋˜๋Š”๊ฑด์ง„ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ...?
navigation์—์„œ ์Šคํฌ๋ฆฐ์„ ๊ตฌ๋ถ„์ง“๋Š” ์ƒ๋‹จ์˜ ์Šคํฌ๋ฆฐ ์ด๋ฆ„๋ถ€๋ถ„.
๊ทธ ๋ถ€๋ถ„๋„ ์Šคํƒ€์ผ๋ง์ด ๊ฐ€๋Šฅํ•ด์„œ
Main ์Šคํฌ๋ฆฐ๊ณผ ๋‚˜๋จธ์ง€ ๋‹ค๋ฅธ ์Šคํฌ๋ฆฐ๋“ค์˜ ์Šคํƒ€์ผ๋ง์„ ๊ตฌ๋ถ„ํ•ด์„œ ํ•ด๋ณด์•˜๋‹ค.

๐Ÿ“Œ screenOptions ์‚ฌ์šฉํ•˜๊ธฐ

์ƒ๋‹จ ์ด๋ฆ„ ์Šคํฌ๋ฆฐ ๋ถ€๋ถ„์—๋„ ์Šคํƒ€์ผ๋ง์ด ๊ฐ€๋Šฅํ–ˆ๊ธฐ์— ๋ฆฌ์„œ์น˜๋ฅผ ํ•ด๋ณด๋‹ˆ
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>
   );
}
...

๊ทธ๋ž˜์„œ ๋‚˜์˜จ ๊ฒฐ๊ณผ๋ฌผ์€ ์›€์งค๋กœ ์˜ฌ๋ ค๋‘ฌ์•ผ์ง€....

๐Ÿ“Œ ๋‚จ์€ ์ž‘์—…๋ถ€๋ถ„

main screen์€ ์•„์ฃผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์—ˆ๊ธฐ์—,
์ด๋ฏธ์ง€์™€ ๋””๋ฐ์ด ํ‘œ์‹œ๋งŒ ๋˜๋ฉด ๋˜์–ด์„œ...
๋‚ด๊ฐ€ tab navigation๊นŒ์ง€ ์ž‘์—…์„ ๋‹ค ํ•ด๋‘์—ˆ์œผ๋‹ˆ ๐ŸŒ
moon์—๊ฒŒ ๋””๋ฐ์ด ๋‚ ์งœ ๊ตฌํ˜„ํ•˜๋Š” ์ž‘์—…์„ ์š”์ฒญํ•ด๋‘์—ˆ๋‹ค.
๊ทธ ์ž‘์—…๊นŒ์ง€ ๋งˆ๋ฌด๋ฆฌ๊ฐ€ ๋˜๋ฉด mainํŽ˜์ด์ง€๋Š” ๊ฑฐ์ง„ ์™„์„ฑ!

๋‹ค์Œ ์ž‘์—…์€ ๊ทธ๋‚˜๋งˆ? ์ข€ ๋งŒ๋งŒํ•ด๋ณด์ด๋Š” ์บ˜๋ฆฐ๋” ์ž‘์—…์œผ๋กœ ๋„˜์–ด๊ฐ€์•ผ์ง€.
์ข€ ๋” ์„ธ๋ถ„ํ™”๋œ ๋ชฉํ‘œ๋ฅผ MOON๊ณผ ์–˜๊ธฐํ•ด์„œ ๊ณ„ํšํ•ด๋ณด์•„์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.
ํ™”์ดํŒ…ํ™”์ดํŒ… ๐Ÿ”ฅ

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

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