React Native Navigation 상단상태바 없애기

react navigation v6를 기반으로 작성되었습니다

필요성

React Native가 일반 React와 다른 특징 중에 하나는 Navigation이다. 

React Navigation에서 stack Navigation을 설정하면 기본값으로 상단 상태바가 생성된다

 

상단 상태바에서 현재 Screen을 확인할 수도 있고, 

이전 스크린으로 되돌아갈 수도 있다.

 

이러한 상태바도 옵션으로 꾸미고 변경할 수 있지만

최근에는 앱에서 각자 상태바를 customize해서 쓰는 경우가 많기 때문에

Navigation에서 기본 제공하는 상태바를 없애고 싶다!!

 

어떻게 없앨 수 있을까...

 

 

 

해결 : headerShown

React Navigation 공식문서가 상당히 방대해서 해당하는 옵션 부분을 겨우 찾았네...

상태바를 없애고 싶을 때는 option에서 headerShown을 false(boolean)으로 설정하면 된다

 

각각 스크린에서 개별로 남겨둘 지, 없앨 지 개별옵션으로 조정할 수 있다 :)

 

아래 예시는 createNativeStackNavigator에서 작동하는 지를 확인했는데, 유사한데 훨씬 자유도가 높다고 하는 createStackNavigator를 사용했을 때에도 동일한 옵션으로 조정할 수 있다.

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import Main from '~/screens/Main';
import Splash from '~/screens/Splash';

const Stack = createNativeStackNavigator();

const Navigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Splash"
        component={Splash}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Main"
        component={Main}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export default Navigator;

 

 

상태바가 없어진 결과 캡쳐!