웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react native

react native navigation head 영역 삭제하기

Last Modified : 2018-08-10 / Created : 2018-08-09
5,129
View Count
react mavigation을 사용할 경우 앱에서 헤더 영역을 어떻게 사용할 것인지 결정할 수 있습니다. 만약 어떤 값도 설정하지 않으면 앱의 최상단에 계속해서 차지하는 영역이 나타나게 되는데 이를 안보이게 하는 방법을 알아봅니다.


! 언제 헤더 영역을 숨겨야할까?

이 영역은 뒤로 가기 등의 버튼이 보이지만 앱에서 특별한 목적이 없는 경우 보이지 않는 것이 화면을 더 크게 사용할 수 있습니다. 또한 직접 헤더 영역을 만드는 경우... 즉 커스텀 헤더 영역을 사용할 경우가 이에 해당합니다.




# react native에서 헤더 영역 없애기

헤더 영역을 없애거나 커스텀 헤더를 만들기 위해서는 아래와 같이 navigationOptions에 header값을 설정하여 가능합니다. 아래와 같이 설정합니다.
export default createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: null,
    }
  },
});

위 코드를 보면 현재 사용하는 Home state에서 navigationOptions를 사용하여 header에 null값으로 설정한 부분입니다. 이 코드를 수행하면 상단의 헤더 영역이 사라지게됩니다.



# 안드로이드 또는 iOS Status Bar와 영역과 겹치는 경우

위 코드를 입력하면 자신의 앱과 디바이스 Status Bar가 겹치는 문제가 발생할 수 있죠. 이를 해결하려면 아래처럼 Header에 null이 아닌 height값을 주어 해결할 수 있습니다.
class Header extends React.Component {
  render() {
    return (
      <View
        style={{
          height: 24
        }}>
      </View>
    )
  }
}

Header 컴포넌트를 등록하고 아래처럼 navigationOptions에 사용하였습니다.
export default createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: <Header />,
    }
  },
});

위 영역이 height: 24값으로 설정되어 겹치지 않게 나타나게됩니다. 안드로이드에서 테스트하였으며 iOS는 높이값이 달라질 수 있으니 참고바랍니다.

Previous

하이브리드앱? React Native 알아보기