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>
   );
}
...

그래서 나온 결과물은 움짤로 올려둬야지....
(수정-2021.05.01)

📌 남은 작업부분

main screen은 아주 간결하게 보여주고 싶었기에,
이미지와 디데이 표시만 되면 되어서...
내가 tab navigation까지 작업을 다 해두었으니 🌝
moon에게 디데이 날짜 구현하는 작업을 요청해두었다.
그 작업까지 마무리가 되면 main페이지는 거진 완성!

다음 작업은 그나마? 좀 만만해보이는 캘린더 작업으로 넘어가야지.
좀 더 세분화된 목표를 MOON과 얘기해서 계획해보아야 할 것 같다.
화이팅화이팅 🔥