React Navigation - header title 설정하는 팁

김도연
3 min readOct 13, 2018

--

저번 프로젝트에서 네비게이터로 react navigation을 사용했다. react navigation을 사용하며 미리 알았다면 편했을 것 같은 팁을 공유하고자 한다. 더 나은 방법이 있을 수 도 있고, 최선의 방법은 아닐 수 있다. 더 나은 법이 있다면 공유 부탁드린다.

이렇게 하면 될 줄 알았지

텍스트로 네이게이터의 제목을 설정하려면 위와 같이 하면 된다. 그러면 아래와 같이 나온다.

중앙정렬되어 이쁘게 나오는 타이틀

왼쪽 오른쪽 아이콘은 따로 설정해준 것이다.

ios에서는 알아서 번듯하게 중앙정렬이 된다. 그래서 안드로이드로 돌려보기 전까지는 문제가 전혀 없었다.

안드로이드에서는 번득하게 알아서 해주지 않는다.

뭐가 문제일까.

stackoverflow를 열심히 찾아보며 ‘난 이렇게 하니까 되던데?’ 라는 방법들을 적용해봤으나 만족스러운 결과가 나오지 않았다.

그래서 공식문서에 도움이 될 만한 것이 없을까 다시 공식문서를 뒤적이다보니 title 대신에 headerTitle 을 사용하여 사용자가 만든 컴포넌트로 타이틀을 지정할 수 있는 방법이 있었다.

그렇다면 컴포넌트를 만드는 것 처럼 작성하면 되지 않을까.

그래서 이렇게 작성해봤다

아예 컴포넌트화 시켜 넣어버렸다. 필요한 스타일과 폰트 설정까지 전부.

이제 ios 도 안드로이드도 이쁘게 나올까?

이제야 원하는대로 만족스러운 모양새가 되었다.

이외에도 타이틀에 이미지나, 버튼 등을 넣으려한다면 headerTitle 을 사용하여 할 수 있다.

아래는 headerTitle에 관련된 공식문서, ios 와 안드로이드의 차이 때문에 발생하는 정렬 이슈에 대해 간략히 설명해놓은 링크를 첨부한다.

--

--

김도연
김도연

No responses yet