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는 높이값이 달라질 수 있으니 참고바랍니다.