728x90
반응형

navigation 2

상단 Navigation Header 뒤로가기 깔끔하게 만들기

✔️ 필요성 react-native 의 상단에서 뒤로가기 버튼을 깔끔하게 만들고 싶다면 어떻게 할 수 있을까? 필자는 styled-components를 활용하여 개발하였다 ✔️ 문제 해결 HeaderLeftGoBack이라는 컴포넌트를 만들어둔 다음에 Screen에서 쓰이는 곳마다 공통적으로 사용하자. 뒤로가기 꺽쇄 모양은 원하는 아이콘으로 얼마든지 활용가능하다. hitSlop값을 적당히 줘서 사용자가 적당히 아이콘 근처를 눌러도 뒤로가기를 클릭할 수 있도록 설정해주었다. import React from 'react'; import styled from 'styled-components/native'; import Icon from 'react-native-vector-icons/Ionicons'; con..

React Native Navigation 상단상태바 없애기

react navigation v6를 기반으로 작성되었습니다 필요성 React Native가 일반 React와 다른 특징 중에 하나는 Navigation이다. React Navigation에서 stack Navigation을 설정하면 기본값으로 상단 상태바가 생성된다 상단 상태바에서 현재 Screen을 확인할 수도 있고, 이전 스크린으로 되돌아갈 수도 있다. 이러한 상태바도 옵션으로 꾸미고 변경할 수 있지만 최근에는 앱에서 각자 상태바를 customize해서 쓰는 경우가 많기 때문에 Navigation에서 기본 제공하는 상태바를 없애고 싶다!! 어떻게 없앨 수 있을까... 해결 : headerShown React Navigation 공식문서가 상당히 방대해서 해당하는 옵션 부분을 겨우 찾았네... 상태바..

728x90
반응형